移动端的适配及布局

 一. 像素
屏幕分辨率
指在横纵坐标的像素点，单位是 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 像素