px,em,rem的区别,工作中怎么做适配

px，em，rem的区别,工作中怎么做适配?

屏幕与分辨率

---

移动设备与pc设备差别最大的就是屏幕的,体现在屏幕的尺寸和屏幕的分辨率。

屏幕尺寸：屏幕对角线的长度。

屏幕分辨率：表示屏幕水平或垂直方向的像素数。相同尺寸下分辨率越高，越清晰。

像素

---

物理像素：一个像素点的大小是不固定的，由屏幕生产商在制造时决定，在实际开发中不能基于物理像素进行布局。

css像素：web中推出一个单位 px，可以解决由于物理像素不同导致不同屏幕下，盒子宽高不一致的问题。

像素比： dpr = 物理像素/css像素 = 1、2、3 即为一倍屏、二倍屏和三倍屏

获取设备的dpr：通过window.devicePixelRatio 来查看设备的像素比。

二倍图和三倍图

---

为了在高倍屏上图片能显示清晰，一般会采用二倍图，在使用时要进行压缩。

实际开发中，设计师给我们的都是二倍图或者三倍图，为了保证每个物理像素对应图片上的每一个像素，保证图片清晰。

200px*200px ： 实际上有多少个像素点？

一倍屏：200个物理像素点 200*200；

二倍屏：400个物理像素点 400*400；

三倍屏：600个物理像素点 600*600；

如何使用二倍图？（压缩图片不会影响清晰度，放大图片会失真）

​ 插入图片： 通过img标签的width属性来压缩图片；

​ 背景图片：通过设置background-size：200px 200px ； （图片原尺寸为400px*400px）就达到了压缩图片的效果。

注意： 压缩了背景图片，对应的背景图片的位置也会缩小相应的倍数！

**伸缩布局：**display：flex ；

---

​ 当给一个盒子设置了display：flex之后，这个盒子就有了***主轴*** 和***侧轴*** 的概念。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认***主轴从左向右*** ，默认***侧轴从上到下*** 。

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

flex-direction：调整主轴方向

​ 取值： row（水平向右）、row-reverse（水平向左）、column（垂直向下）、column-reverse（垂直向上)。

***Justify-content：***主轴对其方式

​ 取值： flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-around（空间环绕）、space-between（两端对齐）。

***align-items：***侧轴对齐方式

​ 取值： flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、stretch（默认拉伸）

​ 子盒子没有高度时，默认拉伸为父盒子的高度。如果子盒子没有设置宽度，宽度为0.

通过设置主轴和侧轴到的对齐方式，可以实现让盒子去任何地方。

***flex-wrap：***是否换行

​ no-wrap：默认不换行，会把所有的元素都挤扁

​ wrap：换行

设置伸缩比例：

​ flex：数值 （设置子元素相对于父元素的宽度比例）。如果有不参与划分的子元素，直接写死宽高，不用设置flex即可。

​

**流式布局：**高度固定，宽度自适应（也叫百分比布局）。

---

​ 流式布局的页面会根据屏幕尺寸的不同动态改变盒子的宽度。但是，在移动端，屏幕尺寸较小，如果只是宽度自适应，高度固定的话，图片就会变形，所以一般pc端采用的流式布局较多，移动端大多采用 em布局或者rem布局。

Bootstrap框架: 可以实现响应式开发。 核心是栅格布局，原理是 媒体查询+百分比布局+浮动 。栅格系统是一种布局方式，类似于伸缩布局，是实现响应式的关键。

px特点：设备是固定的，那么这个设备的css像素也就固定了大小。我们在布局的时候，（比如：width：200px ；height：200px）这样已经写死了盒子的大小，我们在通过调试的时候回发现，无论你如何改变屏幕尺寸，该盒子的宽高永远不会变的。在pc端页面可能没有什么问题，但是手机的屏幕尺寸很多，使用px进行页面布局明显就不合适了，所以在移动端的页面大多采用em布局或者rem布局。

em布局：根据em单位（当前元素的字体）的大小，进行页面布局，可以实现宽高自适应。但是，由于该属性子元素可以继承，如果改变元素的字体大小，该元素的布局也会发生改变！所以，移动端使用rem布局的最多。

rem布局：根据根rem单位元素的字体大小（就是html的字体大小）进行页面布局，由于该属性不会被继承，所以实现宽高自适应只需要根据屏幕大小的变化动态的改变html的字体大小即可。