CSS-移动端响应式布局详解

Posted 2021-01-12 wanxiong

背景

移动端响应式布局开发主要方案有：

• 基于rem开发
• 基于媒体查询
• 基于弹性盒

基础概念

在讨论响应式布局知识前，先了解下移动端常用基础概念。

逻辑像素(CSS pixels)

浏览器使用的抽象单位，主要用来在网页上绘制内容；通常在我们实际开发中涉及到的CSS单位px都是指逻辑像素。

设备像素或物理像素(Device Pixels)

显示屏幕的最小物理单位，每个DP包含自己的颜色、亮度。等值的 CSS pixels在手机屏幕上占多大的位置，这不是固定的，这取决于很多属性；经过分析和总结，我们可以得出这么一条公式：

CSS像素和逻辑像素和物理像素关系

1逻辑像素 = （devicePixelRatio）^ 2物理像素；

屏幕逻辑像素相同，它们的显示效果就是相同。

像素比

像素比 = 实际物理像素/逻辑像素

而不同像素比的设备会根据其像素比率自动分配每一逻辑像素对应多少物理像素。比如对于像素比为2的retina设备，该设备下每一逻辑像素会分配两个物理像素进行显示。这也是为什么retina屏幕会更清晰的原因。使用了更多物理像素显示同一个画面，使能够展示更多的细节。

viewport详解

参考文章

1.https://blog.csdn.net/a0405221/article/details/78913714