一，移动端概述
移动端浏览器我们主要对webkit内核进行兼容，因为现阶段大多数手机端的浏览器都是以webkit内核为基础的，我们现在开发的移动端主要针对于手机端开发，移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
二，视口viewport
1，视口概述
视口其实就是我们浏览器显示页面内容的屏幕区域，视口分为布局视口、视觉视口、理想视口，我们移动端的布局想要的就是理想视口，我们的手机屏幕有多宽我们的视口就有多宽；想要理想视口我们想要给我们的移动端页面添加meta视口标签
2，理想视口设置
标准viewport参数设置，视口宽度和设备保持一致，视口的默认缩放比例1.0，不允许用户自行缩放，最大允许的缩放比为1.0，最小允许的缩放比为1.0
| key | 说明 |
|---|---|
| width | 宽度设置的是viewport宽度，可以设置device-width特殊值 |
| initial-scale | 初始缩放比，大于0的数字 |
| maximun-scale | 最大缩放比，大于0的数字 |
| minimum-saale | 最小缩放比，大于0的数字 |
| user-scalable | 用户是否可以缩放，yes或no（1或0 |
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximun-sacle=1,miximun-sacle=1,user-scalable=0">
三，二倍图
1，物理像素和物理像素比
pc端和早前的手机屏幕/普通手机屏幕：1css像素=1物理像素，到后来retina（视网膜屏幕）是一种显示技术，可以将更多的物理像素点压缩在一块屏幕里，从而达到更高的分辨率，并且提高显示细腻程度，他的比值也就不一样了，像1：4，1:16等等
四，移动端开发选择
现在市场上制作移动端有1，响应式页面 2，单独制作移动端页面两种，但是现在市场上主流的是单独制作移动端页面并且也更加推荐这种方法
五，移动端问题
1，浏览器兼容
移动端浏览器基本以 webkit 内核为主，因此我们就考虑 webkit 兼容性问题我们可以放心使用 H5 标签和 CSS3 样式同时我们浏览器的私有前缀我们只需要考虑添加 webkit- 即可
2，CSS 初始化 normalize.css
移动端 CSS 初始化推荐使用 normalize.css。是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候 形式更统一，是一种现代的、为HTML5准备的优质替代方案。
优点: 保护了有价值的默认值，修复了浏览器的 bug ，解决了浏览器的不一致的默认样式，Normalize.css 是模块化的，提高了易用性，Normalize.css 拥有详细的文档 Normalize.css: Make browsers render all elements more consistently. (necolas.github.io)
