100%布局特点:屏幕尺寸越大显示的内容越多;
rem布局特点:不同屏幕尺寸,显示的内容大致一样;
百分比布局
-
新建html及对应的css
-
引入
meta
:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" id="vp"/>
- 引入设备缩放比代码(后三句),将
id
名添加到meta
标签
<script type="text/javascript">
// 把屏幕的倍率缩小到N分之一(N是window.devicePixelRatio)
var scale = 1/window.devicePixelRatio;
var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';
document.getElementById("vp").content = mstr;
</script>
-
一般拿到640px的设计稿,在iphone5开发。
750px的设计稿,在iphone6开发。 -
做页面,量出来多少写多少。
body, html { height : 100%; }
(1)整个盒子高度100%,设置成弹性盒,主轴垂直向下
(2)main
部分高度不确定,所以剩余高度都给main
,flex:1
;由于main
内容很多,所以还要添加overflow-x:hidden;
从而overflow-y:auto;
(可以省略),这一部分可以垂直滚动。
rem布局
-
新建html及对应的css
-
引入
meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" id="vp"/>
- 引入设备缩放比代码(五句),将
id
名添加到meta
标签
<script type="text/javascript">
// 把尺寸放大N倍(N是window.devicePixelRatio)
var wd = document.documentElement.clientWidth*window.devicePixelRatio/10;
//物理像素*设备像素比=真实像素
document.getElementsByTagName("html")[0].style.fontSize = wd + "px";
// 把屏幕的倍率缩小到N分之一(N是window.devicePixelRatio)
var scale = 1/window.devicePixelRatio;
var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';
document.getElementById("vp").content = mstr;
</script>
-
一般拿到640px的设计稿,在iphone5开发
750px的设计稿,在iphone6开发,注意查看根部字体大小。 -
做页面,量出来多少写多少。把单位直接写成
rem
。(可以通过插件转换,插件里面px
转rem
的值写成:你的开发平台的根部字体大小)
(1)整个盒子高度100%
,设置成弹性盒,主轴垂直向下
(2)main
部分高度不确定,所以剩余高度都给main
,flex:1;
由于main
内容很多,所以还要添加overflow-x:hidden;
从而overflow-y:auto;
(可以省略),这一部分可以垂直滚动。