一.页面结构布局
1.百分比布局。2.弹性盒布局。3.分栏布局。4.响应式布局。
移动端布局为多种布局结合使用,达到完美适配效果
二.单位
1.px
2.百分比
3.em 相对单位,基于自身字体大小font-size来计算,所以不同的元素1em代表的具体大小可能不同(部分浏览器的默认字体大小为16px)
4.vw viewport width,视窗宽度,1vw等于视窗宽度的1%
5.vh viewport height,视窗高度,1vh等于视窗高度的1%
注意:使用vw/vh,需设置meta缩放比1:1 IE9+局部支持,chrome/firefox/safari/opera支持,ios safari8+支持,android browser4.4+支持,chrome for android39支持
三.viewport
1.移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
2.各大手机的viewport大小
3.布局视口(layout viewport) 以屏幕分辨率为基准,实际上布局视口的宽度要比屏幕宽出很多,以上图片显示的尺寸就是 layout viewport
4.视觉视口(visual viewport) layout viewport 的宽度是大于浏览器可视区域的宽度的,所以我们还需要一个viewport来代表 浏览器可视区域的大小,这个viewport叫做visual viewport。在js中可以通过window.innerWidth来获取
5.理想视口(ideal viewport)
一个能完美适配移动设备的视口,需要手动添加meta标签,一般视口大小都设置为设备大小
<meta name="viewport" content="width=device-width">
6.meta标签属性
①.width 设置layout viewport 的宽度,为一个正整数,或字符串”device-width”
②.initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
③.minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
④.maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
⑤.user-scalable 是否允许用户进行缩放
no代表不允许
yes代表允许
四.动态设置字体大小及viewport
<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>