移动端的适配布局方案

1、为什么要进行移动端适配？

• 为了适应各种移动端设备，完美呈现应有的布局效果
• 各种移动端设备，分辨率大小不一致，网页想铺满整个屏幕，并在各种分辨率下等比缩放

现在主流的开发思路

• PC端和移动端分开开发（写两套代码）
• 如果想在既能适应PC，又能适应移动端 （响应式开发 比较麻烦 写好几套css）

2、相关概念

屏幕尺寸

屏幕对角线的长度，单位是英寸
1英寸 = 2.54厘米 6*2.54 = 15.24厘米

屏幕分辨率

在横纵方向上的像素点，单位是px, 1px = 1个像素点（这里的1像素指的是物理设备的1个像素点）
iphone 6 的分辨率是1334750像素，一般是纵向像素横向像素来表示一个手机的分辨率

屏幕像素密度 / 像素密度 / 屏幕密度

屏幕上每英寸可以显示的像素点数量，单位是ppi
屏幕像素密度与屏幕分辨率有关

设备像素 / 物理像素

物理像素： 指的设备的固定像素（1334*750）
设备像素： 可以看成计算机坐标中的一个点

css像素

• css像素是为了web开发者根据设计图表示web页面上内容大小的抽象单位，主要使用在浏览器上
• 一个标准的显示密度下（普通屏），一个css像素对应着一个设备像素，在页面不缩放的情况下，1px的css像素 === 1设备独立像素
• 页面放大200%时，页面的设备独立像素依旧不变，放大的是css像素，但是此时css像素与设备独立像素的关系变化了 1px === 4独立像素

css像素与物理像素的关系

• div {width:100px;} 表示占据了100个像素
• 100个像素占据多少个物理像素，取决于屏幕的特征( 是否高密度，像素比)和用户的缩放行为
• iphone 6 的RetinaHD高清视网膜显示屏中，因为视网膜的像素密度是普通屏幕的2倍，所以这个div就占了200个设备像素，如果用户放大，它将占据更多的设备像素，如iphone 6 plus，就会占300个像素

设备独立像素

• 密度无关像素，可以认为是计算机坐标系中的一个点，这个点代表一个程序员使用的虚拟像素（css设置的像素），然后由相关设备转换成物理像素，去显示对应的大小
• 对于开发者来说，并不在意一个css像素到底跨越了多少个设备像素，因为css和js定义的像素本质上代表的都是css像素看，如何显示对应大小依赖于屏幕特性和用户缩放程度的复杂计算交给浏览器
• 通过window.screen.width / window.screen.height 获取设备宽高

位图像素

一个位图像素是栅格图像（png,jpg,gif等）最小的数据单元，至少一个位图像素对应1个物理像素，图片才能完美清晰的展示

像素比（dpr）

devicePixelRatio指的是物理像素和设备独立像素的比，即1独立像素由多少个物理像素渲染
window.devicePixelRatio可查看当前显示设备的物理像素分辨率与CSS像素分辨率的比率
设备像素比devicePixelRatio = 物理像素 / 独立像素

像素问题

因为不同设备具有不同的dpr+所代表的设备像素不同，所以在有些设备上看到的粗，有些设备看到的细，如何解决：像素边框问题

方法一： 通过媒体查询，查询设备的dpr,根据dpr设置不同的宽度大小

#box {
    height: 200px;
    border-bottom: 1px solid red;
}
@media screen and ( -webkit-min-device-pixel-ratio: 2) {
    #box {
        border-bottom: 0.5px solid #999;
        }
    }
@media screen and ( -webkit-min-device-pixel-ratio: 3) {
    #box {
        border-bottom: 0.3333333px solid blue;
        }
}

缺点：小数像素目前兼容性较差，一些以前的版本可能不支持,理论上最小的单位是 1px , 所以会出现有的设备写0.5px无效（没有边框）的情况

方法二： 借助伪元素缩放处理

.button:after {
    content: '';
    display: block;
    height: 0;
    border-top: #999 solid 1px;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transform: scaleY(0.5);  /*将1px的线条缩小为原来的50%*/
}

缺点：不是所有的设备的dpr都是2 所以固定缩放0.5也会有问题

方法三：借助媒体查询和伪元素缩放来解决

视口

定义：在移动端viewport视口就是浏览器显示页面内容的屏幕区域，在viewport中有两种视口，分别表示为：visual viewport(可视视口)和layout viewport(布局视口)
两个视口是叠加在一起
visual viewport 固定大小跟屏幕大小相同，可以通过window.innerWidth来获取
视口默认的宽度是980px,我们可以用meta标签来调视口看度，此时视口宽度被束缚为320-480之间
现代网页需要将layout viewport 设置成跟visual viewport相同的大小，方便网页制作

视口的设置：

通过标签进行设置，name属性指定viewport的值，content属性进行视口配置

取值	含义
width	设置layout view的宽度为特定值，device-width表示设备的宽度
height	设置layout view 的宽度为特定值，一般不设置
initial-scale	设置页面初始缩放
minimum-scale	设置页面最小缩放
maximum-scale	设置页面最大缩放
user-scalable	设置页面能否缩放