移动端适配

meta viewport

1. viewport的概念

移动设备上面的viewport就是设备上的屏幕用来显示网页的那块区域，叫做视口，但是在默认情况下，移动设备上的viewport是要大于浏览器可视区域的，因为移动设备的分辨率相对于电脑来说比较小，所以为了能在移动设备上正常显示那些传统的电脑浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或者1024px，所以移动设备上浏览器会出现横向滚动条，因为浏览器可视区域宽度小于viewport

1. css中的1px不是设备的1px

css中的像素只是一个抽象的单位，在不同设备或者不同环境中，css中的1px所代表的设备物理像素是不同的。
在早先的移动设备中，屏幕像素密度低，一个css像素确实就是一个屏幕物理像素，当后来移动设备屏幕分辨率变高，但屏幕尺寸没有变，这时，一个css像素是等于两个物理像素的，所以css像素相当于多少物理像素是不确定的。

1. 三种viewport

• layout viewport:因为手机的分辨率越来越大，为了让手机显示电脑浏览器的网页正常，浏览器默认情况下把viewport设为980px或者1024px，这样即使是那些为桌面设计的网站也能在移动浏览器上正常显示，这就是layout viewport，它的宽度可以通过document.documentElement.clientWidth。
• visual viewport:因为layout viewport的宽度是大于浏览器可视区域的宽度，所以需要一个viewport代表浏览器可视区域的大小，这就是visual viewport，它可以用window.innerWidth来获取
• ideal viewport：为移动设备单独设计，需要一个能完美适配移动设备的viewport，不需要用户缩放和横向滚动条就能正常查看网站的内容

1. 利用meta viewport来控制viewport

进行移动设备开发时，将下面的代码复制到head标签中：

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'>

该标签可以使移动设备开发时使用ideal viewport

• width=device-width: 让当前viewport宽度等于设备的宽度
• user-scalable=no: 禁止用户缩放
• initial-scale=1.0: 设置页面的初始缩放值为不缩放
• maximum-scale=1.0: 允许用户的最大缩放值为1.0
• minimum-scale=1.0: 允许用户的最小缩放值为1.0

媒体查询

媒体查询可以根据用户设备屏幕大小和横向或纵向来提供不同的样式，使用方法：

• link元素中的css媒体查询:

<link rel="stylesheet" media="(max-width=800px)" href="example.css" >

• 样式表中的css媒体查询

@media (max-width: 600px) {

}

可以根据自定义条件来设置媒体的样式

• 动态rem

要保持页面布局按照比例布局
什么是rem，rem是相对尺寸单位，相对于html标签字体大小的单位
所以我们通过用js来控制html标签的font-size值:

    document.documentElement.style.fontSize = window.innerWidth / 10 + 'px';

使用rem，这样保持了整体页面的比例，不会导致页面变形