1. css常见单位
css中的单位整体可以分成两类,分为绝对单位和相对单位
绝对单位：它们与其他任何东西都没有关系，通常被认为总是相同的大小,px 相对单位:em,rem,vw,vh
2.px像素
像素单位常见的有三种像素名称:设备像素,设备独立像素,CSS像素
-
设备像素
- 设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了
- 我们在购买显示器或者手机的时候，提到的设备分辨率就是设备像素的大小
- 比如iPhone X的分辨率 1125x2436，指的就是设备像素
-
设备独立像素
- 比如你购买了一台显示器，在操作系统上是以1920x1080设置的显示分辨率，那么无论你购买的是2k、4k的显示器，对于开发者来说，都是 1920x1080的大小。
-
CSS像素
- CSS中我们经常使用的单位也是pixel，它在默认情况下等同于设备独立像素（也就是逻辑像素）
3.移动端适配
移动端开发目前主要包括三类：
- 原生App开发（iOS、Android、RN、uniapp、Flutter等）
- 小程序开发（原生小程序、uniapp、Taro等）
- Web页面（移动端的Web页面，可以使用浏览器或者webview浏览）
视口viewport
在PC端的页面中，我们是不需要对视口进行区分，因为我们的布局视口和视觉视口是同一个,但是在移动端，不太一样，你布局的视口和你可见的视口是不太一样的
移动端，我们可以将视口划分为三种情况:
- 布局视口
- 视觉视口
- 理想视口
布局视口（layout viewport）: 默认情况下，一个在PC端的网页在移动端它会按照宽度为980px来布局一个页面的盒子和内容,为了显示可以完整的显示在页面中，对整个页面进行缩小 相对于980px布局的这个视口，称之为布局视口（layout viewport）
布局视口的默认宽度是980px
视觉视口（visual viewport）: 如果默认情况下，我们按照980px显示内容，那么右侧有一部分区域 就会无法显示，所以手机端浏览器会默认对页面进行缩放以显示到用 户的可见区域中那么显示在可见区域的这个视口，就是视觉视口（visual viewport）
理想视口（ideal viewport）
默认情况下的layout viewport并不适合我们进行布局,我们可以对layout viewport进行宽度和缩放的设置，以满足正常在一个移动端窗口的布局
4.移动端适配方案
- 方案一：百分比设置
- 方案二：rem单位+动态html的font-size
- 方案三：vw单位
- 方案四：flex的弹性布局
rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的 font-size尺寸
适配方案 – rem+动态html的font-size
rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的 font-size尺寸。
怎么动态设置rem的font-size?
方案一：媒体查询可以通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸
缺点：需要针对不同的屏幕编写大量的媒体查询;动态改变尺寸，不会实时的进行更新
方案二：编写js代码如果希望实时改变屏幕尺寸时，font-size也可以实时更改，可以通过js代码 根据html的宽度计算出font-size的大小，并且设置到html上,监听页面的实时改变，并且重新设置font-size的大小到html上
rem的单位换算
方案一：手动换算 方案二：less/scss函数
方案三：postcss-pxtorem（后续学习）
方案四：VSCode插件
适配方案 - vw
vw和rem的对比
rem事实上是作为一种过渡的方案，它利用的也是vw的思想
将1rem等同于设计稿的1/10,1vw不是刚好等于屏幕的1/100
vw相比于rem的优势：
- 不需要去计算html的font-size大小，也不需要给html设置这样一个font-size
- 不会因为设置html的font-size大小，而必须给body再设置一个font-size，防止继承
- 因为不依赖font-size的尺寸，所以不用担心某些原因html的font-size尺寸被篡改，页面尺寸混乱
- vw相比于rem更加语义化，1vw刚才是1/100的viewport的大小
- 可以具备rem之前所有的优点
所以，目前相比于rem，更加推荐使用vw（但是理解rem依然很重要）
