一. 像素
- 屏幕分辨率
指在横纵坐标的像素点，单位是 px，1px = 1 像素点
iphone6 750*1334
屏幕像素密度：屏幕上每英寸可以显示的像素点的数量
屏幕分辨率，像素密度都是设备厂商规定的，不能修改 -
像素
物理像素：任何设备的物理像素的数量都是固定的，它是屏幕能显示的最小粒度。
CSS像素： CSS 像素是一个抽象的单位，主要用于浏览器确定 Web 页面的内容。
在普通屏下，一个 CSS 像素对应一个设备像素CSS 像素与 物理像素的关系：
1. 屏幕特性 2. 用户缩放的行为
二. 视口
- layout viewport(布局视口)
它是一个容器，用来装下 PC 端的页面
默认的布局视口都是 980， IE 是1024
一般移动端的页面有两套方案，一是写两套页面，一个是响应式布局。 - 视觉视口
视觉视口与设备屏幕的区域一样宽，像素值是 CSS 像素决定的。 -
理想视口
布局视口的默认宽度并不是一个理想的宽度，对于移动设备来说，最理想的情况是用户进入界面不再进行缩放。只有专门为移动设备开发的网站，才有理想视口这么一说<meta name="viewport" content="width=device-width"/>width：布局视口的宽
device-width：设备独立像素的值当加上 meta，设备独立像素 = CSS 像素 = 375
没有 meta：
物理像素： 750 设备独立像素：375 CSS 像素：980 同一个元素，在不同的设备上，呈现的效果一样，等比有 meta：
物理像素： 750 设备独立像素：375 CSS 像素：375 同一个元素，在不同的设备上，呈现的效果不一样，不等比dpr(像素比) = 物理像素/设备独立像素
-
移动端缩放：布局视口永远不变
放大：CSS3 像素面积变大，元素像素值不变，视觉视口反而是变小了 从技术层面上来讲，缩放就是放大或缩小 CSS 像素面积的过程，改变的是视觉视口的尺寸。
三. 事件
1. 手指按下
ontouchstart
2. 手指移动
ontouchmove
3. 手指离开
ontouchend
取消浏览器的默认行为
document.addEventListener("touchstart", function(event) {
event.preventDefault()
})
移动端的准备工作：
1. meta标签
2. 清除默认样式
3. 清除系统滚动条
4. 取消默认行为
5. 适配
6. 点透处理
点透处理方案：
1. 让 a 元素不能进行跳转，禁止浏览器的默认行为
2. box 盒子消失，点击 a 元素，a 元素该去跳转
document.addEventListener("touchstart", function(){
event.preventDefault()
})
var aTags = document.querySelectorAll('a')
for (var i = 0;i < a.length;i++) {
aTags[i].addEventListener("touchstart", function(){
window.location.href = this.href
})
}
竖向滑屏
// 手指按下(父元素绑定事件)
// 手指移动(不需要嵌套在按下事件中)
如果手指抬起来的时候没有额外的动作，就不需要写手指抬起事件
四. 适配
em: 参照自身的字体大小
rem：参照根元素的字体大小(html,默认16px)rem 适配原理：
1. 页面中的所有元素，单位都是 rem
2. 把整个屏幕的宽度设置成根元素的字体大小(1 rem = 375px)
var styleNode = document.createElement('style')
- rem 适配
图纸较大，750，1080 页面元素较多
- viewport 适配
设计图纸较小 320
- 百分比适配
页面比较少
- 媒体选择器(响应式布局)
在不同的屏幕上，页面布局不一样
- 具体像素
dpr = 2 = 物理像素/CSS 像素