海阔天空

手机扫码查看

移动端布局

viewport视口

在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口，分别表示为，visua lviewport(可视视口）和layout viewport(布局视口）。

visual viewport固定大小跟屏幕大小相同，在上面，而layout viewport可改变大小，在下面。Layout viewport默认大小为980像素，可通过document.documentElement.clientWidh获取。

现代网页需要将layout viewport设置成跟visual viewport等同大小，方便进行网页制作。

通过meta标签设置，name属性指定viewport值，content属性进行视口配置。

取值：
width 设置layout viewport的宽度特定值，device-width表示设备宽
height 设置layout viewport的高度特定值，一般不进行设置
initial-scale 设置页面的初始缩放
minimum-scale 设置页面的最小缩放
maximum-scale 设置页面的最大缩放
user-scalable 设置页面能否进行缩放

移动端适配方案
1.百分比
好处：大屏幕下显示更多的内容
坏处：宽屏下比例会有一些不协调

2.等比缩放布局

rem布局

单位：
em：是一个相对单位，1em等于当前元素或父元素的font-size值
rem：是一个相对单位，1rem等于根元素的font-size值
vw/vh：把屏幕分为100份，1vw等于屏幕宽的1%

动态设置font-size
通过js
#box{width:1rem;height:1rem;}
var fontsize=document.documentElement.clientWidh/3.75;
document.getElement.style.fontSize=fontsize+’px’;

通过vw
注：要给body重置一下font-size:16px