小结移动端做自适应

1、在HTML的头部加入meta标签

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

width=device-width表示网页的宽度等于设备屏幕的宽度，
initial-scale=1.0表示设置页面初始的缩放比例为1，
user-scalable=no表示禁止用户进行缩放，
maximum-scale=1.0 和 minimum-scale=1.0 表示设置最大的和和最小的页面缩放比例
webstorm中：meta:vp 加tab键可以自动生成

---

2、百分比布局

要想设置当前容器的高度或宽度百分比，必须“明确”知道父容器的高度或宽度

---

3、响应式页面的实现
常见的两种方法：
1.媒体查询@media 查询——媒体查询可以针对不同的屏幕尺寸设置不同的样式
2.bootstrap下的栅格布局

---

4、页面使用相对字体 em和rem
　rem是CSS3新增的一个相对单位（root em，根em）
　
当html设置较大的fontsize时，块元素内的行内元素margin、padding会出现额外的值，
解决办法是把外面包的块元素fontsize设置为0。

---

5、Js动态设置rem来实现移动端字体的自适应
利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用
例：让1rem=100px;动态设置方法：

//获取html元素
var html = document.getElementsByTagName('html')[0]; 
//屏幕的宽度（兼容处理）
var w = document.documentElement.clientWidth || document.body.clientWidth;
//750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
html.style.fontSize = w / 750 + "px";

or：

         var html = document.documentElement;
         var hWidth = html.getBoundingClientRect().width;
         html.style.fontSize = hWidth / 7.5 + 'px';

---

6、图片的自适应

　img{ max-width: 100%;}

ps:windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：　img { -ms-interpolation-mode: bicubic; }