响应式布局及自适应布局在页面中的运用

响应式布局及自适应布局的区别

自适应布局作为兼容PC和移动端的方案之一，指网页或应用能够在不同屏幕尺寸或设备上自动调整布局，以适应不同的屏幕大小和分辨率，从而保持良好的显示效果。主要是通过检测屏幕的分辨率来做适应,通常的做法是为每一个端做一套样式,需要开发多套样式来满足不同设备的需求；使用固定的尺寸单位（如像素“px”）来定义布局和元素的大小，这些尺寸在不同屏幕尺寸之间保持不变。屏幕分辨率变化时，页面里面元素的位置会变化，而大小不会变化;

响应式布局通过则是指网页或应用能够对不同的屏幕尺寸或设备做出不同的响应，从而优化用户体验。响应式设计通常使用相对的尺寸单位（如百分比“%”, 视口单位 “vw” 和 “vh” 等，或者相对单位“rem”）来定义布局和元素的大小，以便能够根据屏幕大小进行自适应调整。

优缺点：
1)自适应方案， 如果屏幕分辨率过小的情况下，显示过于拥挤
2）响应式一套样式，会有兼容问题处理

vw rem em px rpx dp 的区别

px:在显示屏上，每一个画面都是由无数的点阵形成的。这个点阵中，每一个点叫做像素,屏幕上的一个像素点叫做（pixel）

rem: 通常用于响应式布局，使用rpx 设置大小后，元素会随着屏幕的分辨率而自适应；以html的字体大小作为标准

em: 在设置元素的字体大小后 子元素的 1em  = 父元素的fontSize的大小,  所以em是一个相对单位

vw:  视图的宽度的 1%; 可以认为  1vw = 客户端宽度（clientWidth）/ 100

rpx： 作为一个在微信小程序中使用的单位 ，它是相对单位，表示屏幕宽度的1/750

dp：（也称为密度无关像素）是安卓系统中的一个单位，用于确保元素在不同的设备上具有相同的物理尺寸。它是相对单位，表示160dpi屏幕上的1/160英寸。在不同的设备上，1dp对应不同的像素数，但它们的物理尺寸是相同的。

pxtorem 和 pxtovw 的使用差异

作为的postcss的两个样式预处理的转换插件，pxtorem是将元素的大小转换为以html根节点的字体的大小的rem; 元素px/元素的fontsize的px *1rem; 而pxtovw 是使用窗口宽度作为基准，元素大小会自动根据浏览器的窗口进行调整；
这两种转换方式都是四舍五入  存在精度缺失