移动端主要处理webkit内核就行
视口：浏览器显示页面的屏幕区域。视口分为布局视口、视觉视口和理想视口。
2.1 布局视口layout viewport
2.2 视觉视口 visual viewport
用户能看到的网站区域，注意：是网站的区域； 通过缩放去操作视觉视口，不会影响布局视口，布局视口仍保持原来的宽度。 2.3 理想视口 ideal viewport 2.4 meta视口标签 下面这段代码每次进行前端编程时，系统自动生成。
<meta name="viewport/*窗口名称*/" content="width=device-width/*设备宽度*/, initial-scale=1.0/*初始缩放比*/， maximum-scale = 1.0/*最大缩放比*/， user-scalable = no/*用户是否可以缩放，yes 或 no*/">3.1 物理像素&物理像素比
物理像素：分比率，就是屏幕可以存放多少元素 注意：PC端:1px = 1物理像素，但是移动端不尽相同； 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比 1px
二倍图出现的原因：假如一张图片是（50px 50px)像素，在一些设备中打开会按照一定的比例放大，这就导致图片肯定会模糊，为了解决这个问题，一开始就放一张设备放大后的的图片，然后再将大图片缩小至（50px 50px）。这时候图片在设备中打开就不会模糊了。
例子：
背景图片缩放background-size:图片宽度 图片高度 如果只写一个参数，那么就是等比例缩放； 参数可以跟百分比，相对于父盒子来说的
**background-size：cover;//要完全覆盖父盒子，可能会有部分图片不全。** **background-size：contai;//高度和高度等比例拉伸，当宽度或者高度铺满父盒子，就不再拉伸，可能会有空白区域。**4.1 移动端主流方案：
4.1.1 单独制作移动端页面（主流）
网址域名前加m(mobile)可以打开移动端，通过判断设备，如果是移动端设备打开，则跳到移动端页面。
4.1.2 响应式页面兼容PC移动端（其次） 制作麻烦；
5.1 移动端浏览器
CSS3盒子模型box-sizing 使盒子变成CSS3盒子：box-sizing:border-box; 变成CSS3盒子之后不会再受padding 和border的影响。
6.1.1 流式布局（百分比布局） 又称非固定像素布局； 相关代码：
section { width: 100%; max-width: 300px; /*最宽宽度*/ max-height: 600px; /*最高高度*/ } section div { width: 50%; height: 150px; float: left; }二倍精灵图做法：在firework里面把精灵图等比例缩放原来的一倍，之后根据大小测量坐标，注意background-size也要写：精灵图原来宽度的一半。
