前端适配

一.相关概念
参考https://www.cnblogs.com/zaoa/p/8630393.html

1.像素
像素就是构成图像的最小单位,指显示屏上的最小单位, 图像由像素组成,单位面积内的像素越多 效果就越好 像素的大小不是绝对的,是根据设备的分辨率决定的
2.分辨率
屏幕分辨率 : 屏幕横向和纵向的像素点数,单位为px

相同大小的屏幕 分辨率越低,单位像素尺寸越大,分辨率越高,单位像素尺寸越小

图像分辨率 : 指图片含有的像素数 , 表示图片分别在垂直和水平上所具有的像素点数

同一尺寸的图片，分辨率越高，图片越清晰。

3.像素密度（PPI）
每英寸包括的像素数

PPI可以用于描述屏幕的清晰度以及一张图片的质量,PPI越高，屏幕越清晰。

4.设备物理像素 (物理分辨率)
设备的真实分辨率 屏幕有多少个像素点 就是多少分辨率
5.设备独立像素dips (逻辑分辨率)
一种单位来告诉不同分辨率的手机，它们在界面上显示元素的大小是多少 即设备几个像素当成一个像素使用

以iphone6为例, dips为375* 667 即是2*2个物理像素当做一个设备独立像素
各种设备，手机，平板，笔记本等逻辑像素
手机：逻辑像素在3xx-4xx（短边）之间
平板：10寸平板7xx-8xx（短边）
笔记本：13寸 1280 （长边）
24寸显示屏：1920（长边）

6.设备像素比dpr

物理像素比设备独立像素的比值
css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的,1px并不是绝对的,它只代表了当前设备像素的最小单位.
在pc端 1px等于一个设备的物理像素,但是移动设备的屏幕像素密度越来越高 ,iphone6上一个css像素是等于两个物理像素,通过dpr，我们可以知道该设备上一个css像素代表多少个物理像素
获取dpr:
js:
window.devicePixelRatio
css:
webkit-min-device-pixel-ratio

7.css像素
CSS像素，当页面缩放比例为100%时，一个CSS像素等于一个设备独立像素。
但是CSS像素是很容易被改变的，当用户对浏览器进行了放大，CSS像素会被放大，这时一个CSS像素会跨越更多的物理像素。
页面的缩放系数 = CSS像素 / 设备独立像素。

8.视口(layout viewport)
布局视口:当前浏览器的可视区域,不包括菜单栏及浏览器的ui不包含滚动条等
在PC端上，设置viewport不生效,布局视口永远等于浏览器窗口的宽度。
在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里 布局视口默认是980px,会出现滚动条

//获取视口宽度
document.documentElement.clientWidth / Height
//移动端获取视口宽度适配
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">

meta标签的作用是让当前视口的宽度等于设备的宽度，同时不允许用户手动缩放

二.常见的布局方案

• 媒体查询
• 百分比
• flex

flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: flex-direction | flex-wrap;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

• rem/em

REM是CSS3新增的单位，并且移动端的支持度很高，Android2.x+,ios5+都支持。rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。 因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可（而em是相对于父元素的）。

• vw/vh

vh、vw 方案即将视觉视口宽度 window.innerWidth 和视觉视口高度 window.innerHeight 等分为 100 份
vw也是一个相对单位，它相对的是布局视口，1vw就是1%的布局视口宽度。还是熟悉的iPhone6标准设计图，宽750px。那么1vw = 1%视口宽度的话，按设计图来说就是100vw = 750px，则1vw = 7.5px。

三.移动端适配

• px+各种布局(百分比 媒体查询等)
• 在 head 设置 width=device-width 的 viewport
• 在 css 中使用 px
• 在适当的场景使用 flex 布局，或者配合 vw 进行自适应
• 在跨设备类型的时候使用媒体查询