CSS单位
CSS常用长度单位
px：相对长度单位
- 相对于显示器屏幕分辨率
rem：相对长度单位
- 对于根元素(即html元素)font-size计算值的倍数
html{
font-size:14px; 那么 14px=1rem 28px=2rem 即：n px=n/14 rem
}
h3{
font-size=2rem; // 转换为px 即是 2*12=24px
}
vw 和 vh
- 移动端开发比较好的选择
- vw和vh相对于视口的宽度和高度
- 1vw等于视口宽度的1%；1vh等于视口高度的1%
- 1vh 等于1/100的视口高度；1vw 等于1/100的视口宽度
- 浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px
视口
-
在桌面端，视口指的是在桌面端，指的是浏览器的可视区域
-
在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
-
视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport,
-
“视区”所指为浏览器内部的可视区域大小，即
window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小
em：相对长度单位
-
相对于当前对象内文本的字体尺寸
-
如当前对象行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
-
em的值并不是固定的；em会继承父级元素的字体大小
-
假定当前默认字体尺寸是14px，n em即为14px字体尺寸的n倍：
body{
font-size:14px; // 设置body默认字体是14px 那么 14px=1em 28px=2em 即：n px=n/14 em
}
h3{
font-size:3em; // 转换为px 即是 3*14=42px
}
// 如果当前对象行内文本的字体尺寸设置为12px,则如下：
h2{
font-size:12px;
h3{
font-size:3em; // 转换为px 即是 3*12=36px
}
}
像素相关
3.1 物理像素 / 设备像素
-
设备像素 / 物理像素 是一个长度单位
-
物理像素对应显示设备中一个微小的物理部件
-
设备像素是手机屏幕的一个参数，由手机制造商决定。例如 IPhone 6 的物理像素为 750 * 1334
3.2 设备独立像素 / 设备无关像素
设备独立像素（也叫密度无关像素），可以认为是计算机坐标系统中得一个点，
这个点代表一个可以由程序使用的虚拟像素（比如：css像素），然后由相关系统转换为物理像素
设备独立像素，简称 DIP（device-independent pixel）,又称为设备无关像素，是一个长度计量单位。
设备独立像素也是手机屏幕的一个参数，由手机制造商决定。例如IPhone 6 的设备独立像素为 375 * 667
1 个设备独立像素可以认为是计算机坐标系统中的一个点，代表可以通过程序控制使用的虚拟像素。
- 普通屏幕下 1 设备独立像素 等于 1 物理像素
- 高清屏幕下 1 设备独立像素 等于 N 物理像素
Retina 屏幕
Retina 是苹果公司 2010 年推出的一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。
设备独立像素的出现，使得即使在高分辨率的屏幕下，也可以正常尺寸的显示元素，代码不受到设备的影响。
几款手机的屏幕像素参数，点击这里查看更多
| 型号 | 设备像素 | 设备独立像素 |
|---|---|---|
| IPhone 3GS | 320 * 480 | 320 * 480 |
| IPhone 4 / 4s | 640 * 960 | 320 * 480 |
| IPhone 5 / 5s | 640 * 1136 | 320 * 568 |
| IPhone 6 / 7 / 8 | 750 * 1334 | 375 * 667 |
| HUAWEI P10 | 1080 x 1920 | 360 x 640 |
| IPhone X | 1125 * 2436 | 375 * 812 |
3.5 设备像素比DPR（device pixel ratio DPR）
- 设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系
- 单一方向上
设备物理像素和设备独立像素的比例 - 设备像素比＝物理像素／设备独立像素 （在x方向或者y方向）
rem是根据页面的根元素(html body元素)的font-size的一个相对的单位
PPI: 可以理解为屏幕的显示密度
Resolution: 就是我们常说的分辨率
window.devicePixelRatio像素比的作用
程序可以根据像素比来显示不同的图片，达到清晰显示网页的效果。
@media (-webkit-min-device-pixel-ratio: 2) { #box{ background-image: url('./image/logo@2x.png'); } } @media (-webkit-min-device-pixel-ratio: 3) { #box{ background-image: url('./image/logo@3x.png'); } }并不是所有的图片都这样处理，只需要处理那些页面布局需要的图片和图标即可
3.3 CSS 像素 / 逻辑像素
CSS 像素是 CSS 语言中用来表示长度的一个单位，单位为 px。
- CSS 像素不能直接跟现实中的长度单位换算
- CSS 像素主要用在 CSS 与 JS 中控制元素的大小与位置
3.4 位图像素
3.4.1 位图和矢量图
- 位图图像亦称为点阵图像或栅格图像，是由单个的像素点组成的。放大后会失真。
- 矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。放大后不会失真。软件有Adobe Illustrator，Sketch
位图像素也是一个长度单位。位图像素是栅格图像（如：png，jpg，gif等）最小的数据单元。
1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示
3.4.2 像素之间的关系
- 页面不缩放的情况下，CSS 像素 == 独立设备像素 == 逻辑像素 == DIP == 位图像素
- 在一个标准的显示密度下(普通屏)，一个 CSS 像素对应着一个设备像素，高清屏幕下一个 CSS 像素 等于 N 个物理像素
3.4.3 像素密度
屏幕上每英寸可以显示的像素点的数量，单位是 ppi （pixels per inch ），这里还有另一个单位 dpi（dots per inch），两个值的计算方式都一样，只是使用的场景不同。 PPI 主要用来衡量屏幕，DPI 用来衡量打印机，鼠标等设备。
苹果曾经给出个一个标准：手机屏幕达到 300PPI、平板屏幕达到 220PPI、笔记本电脑屏幕达到 200PPI 即可认为是 Retina 屏幕。
vw单位换算
单独使用VM
// iPhone 6 尺寸作为设计稿基准
$vm_base: 375;
@function vw($px) {
@return ($px / 375) * 100vw;
}
.btnStyle {
width: vw(126);
height: vw(40);
line-height: vw(40);
background: red;
color: white;
text-align: center;
margin: vw(20) auto;
font-size: 18px;
border-radius: vw(4);
}
VM和rem搭配
// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
@return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
// 同时，通过Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
max-width: 540px;
min-width: 320px;
}
.btnStyle2 {
width: rem(126);
height: rem(40);
line-height: rem(40);
background: red;
color: white;
text-align: center;
margin: rem(20) auto;
font-size: 18px;
border-radius: rem(4);
}
