一、像素
1.1 像素
设备像素（DP）单位pt = 物理像素 （绝对单位）
--设计师按照这个设计
CSS像素（设计稿）单位px = 逻辑像素(是一个相对单位也叫 设备独立像素）
设备像素比（DPR）：DPR = 设备像素/CSS像素（在某一方向上，x或者y）
1.2 关于DPR
- 获取dpr
window.devicePixelRatio
- dpr 的大小并不是通过固定公式计算出来的，而是厂商给屏幕设置的一个固定值，出厂时就确定了，它的大小不会随着程序的设置而改变。
- 对于同一个元素，dpr 越大，为保证元素同等大小，屏幕所需要的物理像素就越多。
在 dpr=1 的屏幕上，1个逻辑像素对应1个物理像素。
在 dpr=2 的屏幕上，1个逻辑像素需要对应4个物理像素，才能保证元素同等大小。
同理，在 dpr=3 的屏幕上，1个逻辑像素对应9个物理像素，才能保证元素同等大小。
iPhone 常见的几种规格
| 设备 | 逻辑分辨率(point) | 物理分辨率(pixel) | 屏幕尺寸 | dpr | PPI |
|---|---|---|---|---|---|
| iPhone 3GS | 320 × 480 | 320 × 480 | 3.5寸 | 1 | 163 |
| iPhone 4 | 320 × 480 | 640 × 960 | 3.5寸 | 2 | 326 |
| iPhone 5 | 320 × 568 | 640 × 1136 | 4.0寸 | 2 | 326 |
| iPhone 6 | 375 × 667 | 750 × 1334 | 4.7寸 | 2 | 326 |
| iPhone 6 Plus | 414 × 736 | 1080 × 1920 | 5.5寸 | 3 | 401 |
| iPhone X | 375 × 812 | 1125 × 2436 | 5.8寸 | 3 | 458 |
| iPhoneXR | 414 × 896 | 828 × 1792 | 6.1寸 | 2 | 326 |
| iPhoneXS Max | 414 × 896 | 1242 × 2688 | 6.5寸 | 3 | 458 |
2 viewport（视口）
视口(viewport)代表当前可见的计算机图形区域。在Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的UI， 菜单栏等——即指你正在浏览的文档的那一部分。
2.1 分类
viewport分为三种：
-
layout viewport 布局视口，指DOM宽度
-
visual viewport 可见视口，指屏幕宽度
-
ideal viewport 理想适口，使布局视口就是可见视口
细讲3种viewport
- 布局视口 layout viewport
// 获取布局视口大小
document.documentElement.clientWidth / clientHeight。
- 视觉视口 visual viewport -用户通过屏幕真实看到的区域。
// 获取视觉视口大小
window.innerWidth / innerHeight。
- 理想视口 ideal viewport
理想视口：对设备来说最理想的布局视口尺寸，用户进入页面后不需进行缩放就能达到合适的视觉体验。布局视口 = 可见视口。
理想视口是浏览器定义的，开发者只能用
理想视口跟dpr有关
大致上可以认为：理想视口宽度 = 物理像素 / dpr。
| 设备 | 物理像素（横向） | dpr | 理想视口宽度 |
|---|---|---|---|
| Samsung Galaxy S5 | 1080 | 3 | 360 |
| iphone6 plus | 1080 | 3 (115%) | 414 |
| iphone6 | 750 | 2 | 375 |
// 来获取理想视口大小
screen.width / height。
2.3 meta viewport
作用：帮助我们设置理想视口的，让最大css像素等于设备物理像素。
元素可以告诉浏览器如何解析页面。因此我们可以借助元素的viewport来帮助我们设置视口、缩放等，从而在移动端让页面获得更好的显示效果
如何做的：如何设置理想视口ideal viewport呢？
该meta标签的作用是让layout viewport的宽度等于visual viewport的宽度，同时不允许用户手动缩放，从而达到理想视口
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
要让布局视口的宽度等于理想的宽度有2个重点，缺一不可：
-
设置理想视口- 即让layout viewport = visual viewport
<meta name="viewport" content="width=device-width"> // 因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。 -
1/dpr的缩放 - 即让layout viewport 进行1/dpr 的缩放。
事实上，缩放会使视口的css像素发生变化。
例如iPhone 6，理想视口(375px)情况下, 进行0.5的缩放，视口宽度会变成750px。
所以，通过设置理想视口和1/dpr的缩放，让最大css像素等于设备物理像素。
initial-scale 和 width都是改变layout view的， initial-scale越大，layout view视图越小，画布内的元素的宽度越小。例如：320px的iphone5，设置initial-scale为2时，
layout view只有160px，此时如果某个div设置宽度为200px，那么此时移动端浏览器视口就会产生滚动条。initial-scale越小，layout view视图越大，div的宽度就能设置的越宽。
meta[name="viewport"]里各参数的含义为：
1. width: 设置layout viewport 的宽度，为一个正整数，或字符串”width-device”。
2. initial-scale: 设置页面的初始缩放值，为一个数字，可以带小数。
3. minimum-scale: 允许用户的最小缩放值，为一个数字，可以带小数。
4. maximum-scale: 允许用户的最大缩放值，为一个数字，可以带小数。
5. height: 设置layout viewport 的高度，这个属性对我们并不重要，很少使用。
6. user-scalable: 是否允许用户进行缩放，值为“no”或“yes”。
3 rem
3.1 基本概念
rem（font size of the root element）是指相对于根元素的字体大小的单位。
简单的说它就是一个相对单位，相对于根元素
看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。
3.1 rem作用
移动端的页面布局
1rem等于多少px呢？
1rem等于html根元素设定的font-size的px值，假如我们在css里面设定下面的css。
html{font-size:100px}
1rem =100px，那么后面的CSS里面的rem值则是以这个14来换算，
例如设定一个div宽度为3rem,高度为2.5rem.则它换算成px为width:300px.height:250px。
同理，假如一个设计稿为宽度42px,高度为35px，则换成成rem，则是42/100=.42rem，35/100=.35rem。
浏览器模式等于多少px呢？
如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。
html{ font-size:16px;}
