屏幕详解(前端)一：屏幕分辨率：指屏幕在：横向、纵向上所拥有的物理像素点总数。一般用nm表示例如：iPhone6

屏幕分辨率：

指屏幕在：横向、纵向上所拥有的物理像素点总数。一般用 $n*m$ 表示例如：iPhone6的屏幕分辨率为 $750*1334$ 注意点：屏幕分辨率是一个固定值，屏幕生产出来就确定了，无法修改！！也是当前屏幕的极限值屏幕分辨率，显示分辨率是两个概念，系统设置中可以修改的是：显示分辨率。显示分辨率是设备当前所用到的物理像素点数，也可以说：屏幕分辨率>=显示分辨率

常见的手机分辨率

型号	分辨率
iPhone 3G/3GS	320*480
iPhone 4/4S	640*960
iPhone 6/7/8	750*1334

by the way 所以不提屏幕大小只讲分辨率的行为都是耍流氓

屏幕密度

又称：屏幕像素密度，是指屏幕上每英寸里包含的物理像素点个数，单位是ppi （pixel per inch），其实这里还有另外一个单位 dpi（dots per inch），两个值的计算方式都一样，只是使用你场景不同，ppi主要用来衡量屏幕，dpi用来衡量打印机等屏幕分辨率 X * Y

勾股定理 X边的分辨率的平方 + Y边的分辨率平方 = 对角线的分辨率的平方对角线的分辨率 = (X边的分辨率的平方 + Y边的分辨率平方) 开根号每一英寸的分辨率 = ((X边的分辨率的平方 + Y边的分辨率平方) 开根号) / 屏幕尺寸 ppi = ((X边的分辨率的平方 + Y边的分辨率平方) 开根号) / 屏幕尺寸

手机ppi网站

像素相关

一：物理像素 又称：设备像素物理像素是一个长度单位，单位是px，1个物理像素就是屏幕上的一个物理成像点，就是屏幕中一个微小的发光物理元器件 (可以简单理解为超级微小的灯泡)，是屏幕能显示的最小粒度，它由屏幕制造商决定，屏幕生产后无法修改。例如 iPhone6的横向上拥有的物理像素为750、纵向上拥有的物理像素为 1334，我们也可以用 750 * 1334 表示 一个像素包含红绿蓝三个颜色

二：css像素 又称：逻辑像素，CSS像素是一个抽象的长度单位，单位也是px，它是为web开发者创造的，用来精准的度量Web页面上的内容大小。我们在编写css、js、less 中所使用的都是css像素（可以理解为：“程序员像素”）

思考：我代码中所写的1px（css像素），到了屏幕上到底对应几个物流像素呢？是 1个css像素就对应1个物流像素吗？要探讨这个对应关系，就要学习接下来的新概念：设备独立像素

三：设备独立像素 设备独立像素简称DIP或者DP （device-independent pixel）, 又称：屏幕密度无关像素

引言：在没有出现【高清屏】的年代，1个css像素对应1个物理像素，但自从【高清屏】问世，二者就不是1对1的关系了。苹果公司在2010年推出了一种新的标准：在屏幕尺寸不变的前提下，把更多的物理像素点压缩至一块屏幕里，这样分辨率就会更高显示效果也更加细腻。苹果将这种屏幕称为： Retina屏幕，又名：视网膜屏幕，于此同时推出了配备这种屏幕的划时代数码产品——iPhone4

物理像素、css像素、设备对立像素是如何工作的呢

此处使用iphone举例:

iphone4 的分辨率为 $640 * 960$ ，设备独立像素为 $320*480$
iphone3 的分辨率为 $320*480$ ，设备独立像素为 $320*480$
当程序员写了一个 $2px*2px$ 的盒子时候
iphone3 先经过设备独立像素解析---> 设备独立像素发现，设备独立像素和物理像素相等，---> 则点亮相同数量的物理像素点 $2px*2px$ 共四个
iphone4 先经过设备独立像素解析---> 设备独立像素发现，物理像素是设备独立像素的两倍，---> 则点亮同一方向两倍的物理像素点 $4px*4px$ 的物理像素共16个

设备独立像素的出现，使得即便在【高清屏】下，（例如苹果的Retina屏），也可以让元素有正常的尺寸，让代码不受到设备的影响，是设设备厂商根据屏幕特性设置的，无法更改

设备独立像素与物理像素的关系

普通屏幕下1个设备独立像素对应1个物理像素高清屏幕下1个设备独立像素对应n个物理像素设备独立像素与css像素关系标准情况(在不考虑缩放的前提下) 1px的css像素 === 1px的设备独立像素

四：像素比 像素比(dpr): 单一方向上设备【物理像素】和【设备独立像素】的比例。即：dpr = 物理像素/设备独立像素 window.devicePixelRatio

型号	分辨率(物理像素点)	设备独立像素	像素比(dpr)
iPhone 3G/3GS	$320*480$	$320*480$	1
iPhone 4/4S	$640*960$	$320*480$	2
iPonne 5/5S	$640*1136$	$320*568$	2
iPhone 6/7/8	$750*1334$	$375*667$	2
iPonne 6p/7p/8p	$1242*2208$	$414*736$	3

五：像素之间的关系 在不考虑缩放的情况下（理想状态下）

普通屏（dpr=1）：1css像素 = 1设备独立像素 = 1物理像素
高清屏（dpr=2）：1css像素 = 1设备独立像素 = 2物理像素
高清屏（dpr=3）：1css像素 = 1设备独立像素 = 3物理像素

程序员写了一个width为100px的盒子，那么： 1.代表100个css像素 2.若用户不进行缩放，则对应100个设备独立像素 3.在dpr为2的设备上，这100个css像素占据了100*2=200个物理像素（横向）

描述一下你的屏幕

现在以iPhone6为例，我们描述一下屏幕（横向上） 1.物理像素： 750px 2.设备独立像素： 375px 3.css像素：375px

使用css判断dpr显示高清图片 /* 当dpr最小为2的时候此时显示2x图 */

@media screen and (-webkit-min-device-pixel-ratio:2) {
    .logo{
        content: url('../images/PPI.png');
    }
}

/* 当dpr最小为3的时候此时显示3x图 */

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .logo{
        content: url('../images/ytuyu.jpg');
    }
}

视口相关

pc端视口在pc端，视口的默认宽度和浏览器窗口的宽度一致。在css标准文档中，pc端视口也被称为：初始包含块，它是所有css百分比推算的根源，在pc端可以通过如下几种方式获取宽度

console.log('最干净的显示区域', document.documentElement.clientWidth)
console.log('最干净的显示区域+滚动条', window.innerWidth)
console.log('最干净的显示区域+滚动条+浏览器边框', window.outerWidth)
console.log('当前显示设备分辨率的值', screen.width)

移动端视口

在移动端，浏览器厂商面临着一个比较大的问题，他们如何将数以万计甚至可以说是数以亿计的pc端网页完整的呈现在移动端设备上，并且不会出现横向滚动条呢？那就要引出移动端的三个概念：1.布局视口、2.视觉视口、3.理想视口标准

布局视口

早期的时候我们这样做：pc端网页宽度一般为：960px ～ 1024px 这个范围，就算超出了该范围，960px～1024px 这个区域也依然为版心位置，浏览器厂商针对移动端设备设计了一个容器，先用这个容器去承载pc端的网页，这容器的宽度一般是980px，不同的设备可能有所差异，但是相差并不大；随后将这个容器等比例压缩到与手机等宽，这样就可以保证没有滚动条且能完整呈现页面，但是这样做依然有问题：网页内容被压缩的太小，严重影响用户体验。

移动端获取布局视口方式： document.documentElement.clientWidth 注意：布局视口经过压缩后，横向宽度用css像素表达就不再是375px了，而是980px

视觉视口

视觉视口就是用户可见的区域，它的绝对宽度永远和设备屏幕一样宽，但是这个宽度里所包含的css像素值是变化的，例如：一般手机会将980个css像素放入视觉视口中，而ipad Pro会将1024个css像素放入视觉视口中。移动端获取视觉视口方式：window.innerWidth, 不过在Android2、Opera mini、UC8中无法正常获取，（一般不通过代码看视觉视口）

理想视口标准

与屏幕（设备独立像素）等宽的布局视口，称之为理想视口，所以也可以说理想视口是一种标准：让布局视口宽度与屏幕等宽（设备独立像素），靠meta标签实现

理想视口的特点：

布局视口和屏幕等宽，以iPhone6为例，符合理想视口标准之后：设备独立像素：375px，布局视口宽度：375px
用户不需要缩放、滚动就能看到网站的全部内容
要为移动端设备单独设计一个移动端网站。

设置理想视口的具体方法<meta name="viewport" content="width=device-width"/>

【总结】：

不写meta标签（不符合理想视口比标准）

描述屏幕：物理像素：750px、设备独立像素、375px、css像素：980px。
优点：元素在不同设备上，呈现效果几乎一样，因都是通过布局容器等比缩放的，例如200宽的盒子：200/980
缺点：元素太小，页面文字不清楚，用户体验不好。

写meta标签（符合理想视口标准）

描述屏幕：物理像素：750px、设备独立像素：375px、css像素：375px。
优点：
1. 页面清晰展现，内容不在小到难以观察，用户体验较好。
2. 更清晰的像素关系：布局视口 = 视觉视口 = 设备独立像素 = 375px。
3. 更清晰的dpr 即dpr = 物理像素/设备独立像素 = 物理像素/css像素。
缺点：同一个元素，在不同屏幕（设备）上，呈现效果不一样，例如375宽的盒子： 375/375 和 375/414 不是等比例显示
解决缺点：做适配

缩放 PC端放大时：视口变小元素的css像素值不变，但一个css像素所占的面积变大了缩小时视口变大元素的css像素值不变，但一个css像素所占的面积变小了移动端放大时布局视口不变视觉视口变小缩小时布局视口不变视觉视口变大注意：移动端缩放不会影响页面布局，因为缩放的时候，布局视口没有变化，简记：移动端的缩放没有改变布局视口的任何东西！

viewport meta-viewport标签是苹果公司在2007年引进的，用于移动端布局视口的控制使用示例 viewport 相关选项

1. width 布局视口宽度

width值可以是设备宽度标识device-width，也可以是具体值，但有些安卓手机是不支持具体值， IOS全系列都支持。

2. initial-scale 【系统】初始缩放比例

initial-scale 为页面初始化时的显示比例。
initial-scale = 屏幕宽度(设备独立像素)/布局视口宽度
只写initial-scale = 1.0 也可以实现完美视口，但为了良好的兼容性，width=device-width, initial-scale=1.0 一般一起写。

3. maximum-scale 允许【用户】缩放的最大比例

设置允许用户最大缩放比例，苹果浏览器safari不认识该属性
maximum-scale = 屏幕宽度(设备独立像素)/视觉视口宽度

4. minimum-scale 允许【用户】缩放的最小比例

设置允许用户最小缩放比例。
minimum-scale = 屏幕宽度(设备独立像素)/视觉视口宽度

5. user-scalable 是否允许用户缩放

是否允许用户通过手指缩放页面。苹果浏览器safari不认识该属性

6. viewport-fit 设置为cover值可以解决刘海屏的留白问题

设置为cover值可以解决刘海屏的留白问题

适配

为什么要做适配由于移动端设备的屏幕尺寸大小不一，会出现同一个元素，在两个不同的手机上显示效果不一样（比例不同）。要想让同一个元素在不同设备上，显示效果一样，无论采用何种适配方式，中心原则永远是：等比！。

主流的适配方式有三种：

1. viewport适配

方法：拿到设计稿之后，设置布局视口宽度为设计稿宽度，然后直接按照设计稿给宽高进行布局即可。

优点：不用复杂的计算，直接使用图稿上标注的px值

缺点：不能使用完整的meta标签，会导致在某些安卓手机上有兼容性问题不希望适配的东西，例如边框、也强制参与了适配图片会失真

2. rem适配

em和rem

em和rem都是css中的长度单位。而且两个都是相对长度单位，不过两个有点区别

em相对的是父元素的字体大小

rem相对的是根元素的字体大小

rem适配的原理：编写样式时统一使用rem为单位，在不同设备上动态调整根节点字体大小

具体方案

淘宝、百度的移动端页面用的此方案

1、设置完美视口

核心过程一：（推荐）

根字体 = (手机横向设备独立像素值 * 100) / 设计稿宽度
编写样式时：直接以rem为单位值为：设计值 / 100

核心过程二：（不推荐）

根字体 = 设备横向独立像素值 / 10；
编写样式时：直接以rem为单位值为：设计值/（设计稿宽度/10）

3. vw适配

vw 和 vh 是两个相对单位

1vw = 等于布局视口宽度的1%

1vh = 等于布局视口高度的1%

不过vw和vh有一定的兼容性问题

一物理像素边框

高清屏幕下1px对应更多的物理像素，所以1px像素边框看起来比较粗，使用媒体查询/以下代码顺序不可以改变

/* 屏幕的dpr最少为2时显示 */
@media screen and(-webkit-min-device-pixel-ratio:2){
    #demo{
        border:0.5px solid black;
    }
}
/* 屏幕的dpr最少为3时显示 */
@media screen and(-webkit-min-device-pixel-ratio:3){
    #demo{
        border:0.33px solid black;
    }
}