移动端布局

视口

视口是浏览器显示页面内容的屏幕区域，
视口可以分为布局视口，视觉视口，理想视口
布局视口layout viewport
移动端默认设置了一个布局视口980px
视觉视口visual viewport
用户看到的网站区域

这一行什么意思呢？ viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，默认的viewport是layout viewport，在进行移动设备网站的开发时，我们需要的是ideal viewport理想视口。width=device-width表示当前的viewpoint等于设备的宽度，width用来设置layout viewport的宽度，initial-scale=1.0表示页面的初始缩放值为1，maximum-scale允许用户的最大缩放值，minimum-scale允许用户的最小缩放值，user-scalable表示是否允许用户缩放，“no”不允许，“yes”允许。

二倍图

1. 物理像素 就是分辨率 iPhone8的物理像素是750
2. iphone8 1px开发像素 = 2个物理像素

多倍图

1. 一张50 * 50px的图片在手机中打开，物理像素会被放大2倍(100 * 100), 造成失真
2. 可以使用倍图来提高图片质量，解决在高清设备中的模糊问题
3. 哪一个100 * 100的图片，手动把图片缩小为50 * 50px
4. 我们准备的图片比我们实际需要的图片大2倍，这个就是2倍图

移动端开发选择

1. 响应式的兼容移动和pc
媒体查询
bootstarp
2. 只写移动端
流式布局(百分比布局)
flex弹性布局(强烈推荐)
rem适配布局(flexible.js)
混合布局

移动端技术解决方案

1. css初始化normalize.css
官网地址http://necolas.github.io/normailze.css
2. css3盒子模型box - sizing
传统盒模型 盒子宽度 = width + border + padding
怪异盒模型 盒子宽度 = width里面包含了border和padding

总结建议 选一种主要技术类型，其他技术作为辅助，混合技术开发