移动端布局

一.页面结构布局

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>

本文地址：https://blog.csdn.net/qq_37049128/article/details/107512317