100%布局特色:屏幕尺寸越大显示的内容越多;
rem布局特色:不一样屏幕尺寸,显示的内容大体同样;javascript
新建html及对应的csscss
引入meta
: vp
html
<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开发。java
作页面,量出来多少写多少。
body, html { height : 100%; }
(1)整个盒子高度100%,设置成弹性盒,主轴垂直向下
(2)main
部分高度不肯定,因此剩余高度都给main
,flex:1
;因为main
内容不少,因此还要添加overflow-x:hidden;
从而overflow-y:auto;
(能够省略),这一部分能够垂直滚动。web
新建html及对应的cssiphone
引入meta:vp
svg
<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;
(能够省略),这一部分能够垂直滚动。字体