移动端适配问题

1.自动适应屏幕宽度viewport
在html中添加meta标签:网页的宽度默认等于屏幕的宽度　　

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">

　扩展viewport属性：

　1>width 设置viewport的宽度，可以是数字，或者使用字符串“device-width”；

　2>initial-scale 页面初始的缩放，首次 load 的时候缩放比例

　3>minimum-scale/maximum-scale 允许用户缩放的最小/最大比例

　4>height 设置viewport的高度，很少设置这个属性

5>user-scalable 用户是否可以手动缩放 ，一般两个值 yes/no

2.使用框架搭建页面
1> bootstrap（基于jQuery的响应式工具，适用于移动,pad,pc）

2> ElementUI（PC）,MintUI（移动端） 饿了么基于vue组件库开发的

3.宽度的严格布局书写
因为页面根据屏幕的宽度调整布局，所以不能使用绝对宽度的布局或者是绝对宽度的元素
一般使用width:50% / width:auto (块级元素默认是auto)

4.图片自适应
img {max-width:100%} 由于老的IE不支持max-width{width:100%}

常见问题
1. border 1px 问题
不是所有手机浏览器都能识别border: 0.5px;，ios7以下，android等其他系统里，0.5px会被当成为0px处理
通常是给元素order-bottom: 1px solid #ddd;，然后通过transform: scaleY(.5)缩小0.5倍来达到0.5px的效果，

2.屏幕适配布局问题
响应式布局
流式布局+媒体查询
用来解决不同宽度的布局问题，父级宽度不够的时候，子级节点会“挤下去” — 使用css3，根据屏幕分辨率进行不同的样式应用

伸缩布局
使用的是Flexbox ，有兼容性问题。

rem布局
相对单位rem基准值公式：rem=document.documentElement.clientWidth*dpr/10(10是为了取整)
赋值给html的font-size:rem
demo:iPhone4/5 320*2/10=64px
如需改变根节点的html的font-size的rem 属性可以通过媒体查询/javascript操作

rem是根据html的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局。
目前有两种，一种是根据js来调整html的字号，另一种则是通过媒体查询来调整字号。

rem和em区别
区别在于：em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。
默认情况下浏览器给的字体大小是16px，因此按照转化关系 16px = 1rem。
那么rem的自适应是如何处理呢？
在使用rem布局的时候,为了兼容不同的分辨率,我们应该动态的改变根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果。