- 像素(Pixel)
在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素
例如div尺寸是100 x 100, 那么水平方向就占用100个小方格, 垂直方向就占用100个小方格
像素特点：不会随着视口大小的变化而变化, 像素是一个固定的单位(绝对单位)
- 百分比
百分比是前端开发中的一个动态单位, 永远都是以当前元素的父元素作为参考进行计算
例如父元素宽高都是200px, 设置子元素宽高是50%, 那么子元素宽高就是100px
百分比特点
1.子元素宽度是参考父元素宽度计算的
2.子元素高度是参考父元素高度计算的
3.子元素padding无论是水平还是垂直方向都是参考父元素宽度计算的
4.子元素margin无论是水平还是垂直方向都是参考父元素宽度计算的
5.不能用百分比设置元素的border
- em
em是前端开发中的一个动态单位, 是一个相对于元素字体大小的单位
例如font-size: 12px; ,那么1em就等于12px
em特点
1.当前元素设置了字体大小, 那么就相对于当前元素的字体大小
2.当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小
3.如果当前元素和所有祖先元素都没有设置大小, 那么就相当于浏览器默认的字体大小
结论: em是一个动态的单位, 会随着参考元素字体大小的变化而变化(相对单位)
- rem
rem就是root em, 前端开发中的一个动态单位,
rem和em的区别在于, rem是一个相对于根元素字体大小的单位
例如 根元素(html) font-size: 12px; ,那么1em就等于12px
rem特点
1.除了根元素以外, 其它祖先元素的字体大小不会影响rem尺寸
2.如果根元素设置了字体大小, 那么就相对于根元素的字体大小
3.如果根元素没有设置字体大小, 那么就相对于浏览器默认的字体大小
结论: rem是一个动态的单位, 会随着根元素字体大小的变化而变化(相对单位)
- vw(Viewport Width)和vh(Viewport Height)
1.vw和vh是前端开发中的一个动态单位, 是一个相对于网页视口的单位
2.系统会将视口的宽度和高度分为100份,1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一
3.vw和vh和百分比不同的是, 百分比永远都是以父元素作为参考
而vw和vh永远都是以视口作为参考
结论: vw/vh是一个动态的单位, 会随着视口大小的变化而变化(相对单位)
- vmin和vmax
vmin: vw和vh中较小的那个
vmax: vw和vh中较大的那个
使用场景: 保证移动开发中屏幕旋转之后尺寸不变
- 视口
在PC端，视口大小就是浏览器窗口可视区域的大小
在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980
虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页
但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的
所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小
如何保证在移动端不自动缩放网页的尺寸?
通过meta设置视口大小
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width 设置视口宽度等于设备的宽度
initial-scale=1.0 初始缩放比例, 1不缩放
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放
- 物理像素和CSS像素
设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点，只有屏幕一经出厂就固定不会改变
CSS像素又称为逻辑像素，是编程世界中虚拟的东西, 通过代码设置的像素都是逻辑像素
在PC端，1个CSS像素往往都是对应着电脑屏幕的1个物理像素,所以我们无需关心PC端的CSS像素和设备像素
在手机端：
在1个CSS个像素等于1个物理像素的手机上, 设置1个CSS像素只会占用1个物理像素
在1个CSS个像素不等于1个物理像素的手机上, 我们设置1个CSS像素就会占用2个物理像素
pt是逻辑分辨率（CSS像素），px是物理分辨率（物理像素）
参考文章：移动端适配解决方案
