移动端简单布局

简单的列表页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <style>
    *{ margin: 0; padding:0;}
    html{ font-size: 16px;}
    li{ float: left; width: 50%; height: 20rem; background: blue;  box-sizing:border-box; padding: 1rem 2rem;}

    </style>
</head>
<body>
    <ul>
        <li>
            <div>1111</div>
        </li>
        <li>
            <div>222</div>
        </li>
        <li>
            <div>3333</div>
        </li>
        <li>
            <div>4444</div>
        </li>
    </ul>
</body>
</html>
时间: 2024-08-29 05:48:29

移动端简单布局的相关文章

移动端rem布局和百分比栅格化布局

移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放 设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口宽度,p(比例尺)= 视口宽度/效果图宽度 根元素font-size=100px*p 然后来个resize去跟随浏览器大小变化 1(function (win){ 7 var doc = win.document, 8 html = doc.documentElement, 9 option = h

移动端页面布局的那些事儿

移动端页面布局的那些事儿 http://www.xiaoxiangzi.com/Programme/CSS/4298.html 一. viewport 什么是viewport 简单来讲,viewport就是浏览器上,用来显示网页的那一部分区域了,也就是说,浏览器的实际宽度,是和我们手机的宽度不一样的,无论你的手机宽度是320px,还是640px,在手机浏览器内部的宽度,始终会是浏览器本身的viewport.如今的浏览器,都会给自己的本身提供一个viewport的默认值,可能是980px,或者是其

第31章 项目实战-PC端固定布局[1]

学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一.准备工作 1.为了达到最低效果,第一个项目将采用1440x900的分辨率录制:因为,1024根本无法容纳最低宽度的页面:页面采用1280的最低宽度设计,去掉滚动条为1263像素. 2.第一个项目是PC端的固定布局,会采用像素(px)单位. 3.项目素材图片,是课外独立设计好的,课程不会去设计

移动端自适应布局方案尝试

原文地址:移动端自适应布局方案尝试 问题 刚开始接触移动端H5页面的时候最困扰的几个问题是: 6或6p上明明是1px的边框怎么就成了2px或3px辣么粗! 图片,div等如何等比自适应设计图 后来慢慢知道了第一点是由于retina屏幕下设备像素比的问题造成,第二点知道了单位rem. 目的 不想因为使用rem而一一去计算设计稿的尺寸,设计稿750的尺寸的标注可以直接在sass中使用:字体不使用rem缩放,原因是: 显然,我们在iPhone3G和iPhone4的Retina屏下面,希望看到的文本字号

第32 章项目实战-移动端流体布局3

第32 章项目实战-移动端流体布局[3]学习要点:1.搜索部分2.旅游部分3.媒体查询 本章主要开始如果通过第一个PC 端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局.一.搜索部分搜索部分包含三个内容,背景区块.文本框和按钮.//HTML 部分<div id="search"><input type="text" class="search" placeholder="请输入旅游景点或城市"

第32 章项目实战-移动端流体布局6

第32 章项目实战-移动端流体布局[6]学习要点:1.旅游资讯2.机票预定 本章主要开始如果通过第一个PC 端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局.一.旅游资讯这个如果做成移动端,那么一切从简,否则缩小时就无法容纳太多的文字.//html,布局和PC 端差不多<figure><img src="img/tour1.png" ><figcaption><hgroup><h2 class="titl

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy,在低于安卓4.4的版本号的手机上,自带的浏览器是不支持这个属性的. 好吧,这还不时最坑爹的,在国产的猎豹浏览器以及其它一些浏览器里面,有可能也不支持.总而言之,这个坑踩大了.只是没关系,大部分的常见布局问题,我都能解决掉.可是,以下这个-.我真心有点费解.只是,没关系,通过我的研究,终于还是非常快用

第32 章项目实战-移动端流体布局5

第32 章项目实战-移动端流体布局[5] 学习要点: 1.导航固顶 2.三个栏目 3.公司简介 本章主要开始如果通过第一个PC 端项目进行重构,设计成移动端可访问的页面,这个 项目采用的是流体布局. 一.导航固定 由于移动设备屏幕高度较低,没有滚动条操作的便利性.一般来说,栏目的导航部分总 是固定在移动设备的某一个方位.我们这里将头部的导航永远固定在头部,不会随着页面向 下滑动而更改. //固顶定位 #header { position: fixed; top: 0; z-index: 9999

【转载】Web移动端Fixed布局的解决方案

特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout 移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象 让我们先举个栗子