跳到主要内容

像素与布局

· 阅读需 17 分钟

像素​

  • 物理像素指的是屏幕上的最小显示单元，也就是屏幕实际拥有的像素点数量。这些像素点是真实存在于屏幕上、用于显示内容的基本单位。

  • 逻辑像素（Logical Pixel / CSS Pixel），也称为 CSS 像素，是一个抽象概念，用于在浏览器中统一布局计算的标准单位。

    • 在无缩放的情况下（标准情况）：1CSS 像素 = 1 设备独立像素(DIP 或 DP)
    • 在 CSS 中设置的 width: 375px 或 font-size: 16px 等样式，使用的都是逻辑像素；
    • CSS 像素不直接对应屏幕上的物理像素，而是由操作系统根据设备的像素密度进行映射；
    • 以 iPhone8 为例，物理像素宽度：750px，CSS 像素宽度：375px，设备独立像素：375px

  • 设备独立像素简称 DIP 或 DP（device-independent pixel），又称：屏幕密度无关像素。

    • 设备独立像素 与 物理像素关系：
      普通屏幕下 1 个设备独立像素 对应 1 个物理像素；
      高清屏幕下 1 个设备独立像素 对应 N 个物理像素
    • 设备独立像素 与 css 像素关系：
      在无缩放的情况下（标准情况）：1css 像素 = 1 设备独立像素

  • DPR（Device Pixel Ratio） 设备像素比，在未缩放状态下，物理像素和设备独立像素的初始比例关系

    • 简单的计算公式：DPR = 物理像素 / CSS 像素
    • window.devicePixelRatio 返回当前显示设备的 DPR 值
    • 以 DPR = 2 为例，显示设备会把 4(2x2) 个(物理)像素当 1 个(CSS)像素使用

  • DPI 是 dot per inch 的缩写简称，表示每平方英寸上所含“点”的数目。“点”最通用的两个定义：像素点（电脑屏幕），喷墨点（打印或印刷品）。dpi 一般是针对输出设备而言，指每英寸所能打印的点数，即打印精度。

  • ppi 是 pixels per inch 的缩写简称，表示每平方每英寸显示屏所含像物理素数。

  • 苹果设计系的 pt

    • pt 是 point 的简写形式，是专用的印刷单位。pt 是一个自然界标准的长度单位，可以被丈量，是一种「绝对长度」（1pt 的大小为 1 / 72 英寸，1 英寸 = 2.54 厘米，所以 1pt 约为 0.35 毫米）
    • pt 在 iOS 开发中代表分辨率的最小单位，和 px 一样，也是一种「相对长度」。 pt 这个单位的缘由是苹果的 Retina 屏的分辨率较高，为了更好的定义和展现自己的产品，苹果就自己定义了一个设计单位 pt。
    • pt 与 px 的转换方式是：pt = ppi / 163。此公式中 163 这个数字的来源是 iPhone3 的 3.5 英寸屏幕的分辨率 320x480px，它的 ppi 是 163。苹果规定：ppi = 163 时，1pt = 1px。到了 iPhone4 时，3.5 英寸的手机屏幕分辨率变成了 640x960px，ppi 是 326，这时 1pt = 2px。当 ppi 不能被 163 整除时，可以进行四舍五入。苹果用 pt 这个单位统一了设备更新迭代后带来的设计尺寸数量上的变化。2pt 在任何 iOS 设备上的大小都应该是一样的，但是代表几个 px 却是不固定的，由屏幕的 ppi 来决定。

Google 也出于与苹果类似的原因，推出了在 Android 系统上做设计的单位 dp，全称 Density-independent pixel。dp 和 px 的转换方式是：dp = ppi / 160。原理同上文，但分母取了整数，被规定为 160，结果同样可四舍五入。

历代 iPhone 屏幕信息汇总图

历代 iPhone 屏幕信息汇总图

iPhone 屏幕尺寸分辨率统计表
机型屏幕尺寸（英寸）分辨率（pt）像素分辨率（pixel）宽高比例图片倍数
iPhone4/4s3.5(326ppi)320x480640x9603:2@2x
iPhone5/5c/5s/SE14.0(326ppi)320x568640x113616:9@2x
iPhone6/6s/7/8/SE2-34.7(326ppi)375x667750x133416:9@2x
iPhone6/6s/7/8 Plus5.5(401ppi)414x7361080x192016:9@3x
iPhoneX/iPhoneXS/11Pro5.8(458ppi)375x8121125x243619.5:9@3x
iPhoneXR/116.1(326ppi)414x896828x179219.5:9@2x
iPhoneXSMax/11ProMax6.5(458ppi)414x8961242x268819.5:9@3x
iPhone12mini iPhone13mini5.4(476ppi)360x7801080x234019.5:9@3x
iPhone12/12Pro iPhone13/13Pro6.1(460ppi)390x8441170x253219.5:9@3x
iPhone12/13Pro Max6.7(458ppi)428x9261284x277819.5:9@3x
iPhone14 iPhone16e6.1(460ppi)390x8441170x253219.5:9@3x
iPhone14Plus6.7(458ppi)428x9261284x277819.5:9@3x
iPhone14Pro6.1(460ppi)393x852 灵动岛高度 54pt 状态栏高度 59pt1179x255619.5:9@3x
iPhone14Pro Max6.7(460ppi)430x932 灵动岛高度 54pt 状态栏高度 59pt1290x279619.5:9@3x
iPhone15 iPhone166.1(460ppi)393x852 灵动岛高度 54pt 状态栏高度 59pt1179x255619.5:9@3x
iPhone15Plus iPhone16Plus6.7(460ppi)430x932 灵动岛高度 54pt 状态栏高度 59pt1290x279619.5:9@3x
iPhone15Pro6.1(460ppi)393x852 灵动岛高度 54pt 状态栏高度 59pt1179x255619.5:9@3x
iPhone15Pro Max6.7(460ppi)430x932 灵动岛高度 54pt 状态栏高度 59pt1290x279619.5:9@3x
iPhone16Pro6.3(460ppi)402x874 灵动岛高度 54pt1206x262219.5:9@3x
iPhone16Pro Max6.9(460ppi)440x956 灵动岛高度 54pt1320x286819.5:9@3x

布局范式​

静态布局​

即传统 Web 设计，网页上的所有元素的尺寸一律使用 px 作为单位。

  • 布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的 pc 的网站都是静态（定宽度）布局的，也就是设置了 min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景。

  • 移动端也可以采用静态布局方式

    • 在 viewport meta 标签上设置 content="width=640,user-scalable=no"，再通过 js 动态调整 initial-scale ，使页面等比缩放，这要求 js 代码要提前运行。这是移动端兴起时的移动端布局方式，属于前期探索方案。

流式布局（Liquid Layout）​

流式布局（Liquid）的特点（也叫 Fluid）是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。

  1. 布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但整体布局不变。代表作：栅格布局体系

  2. 设计方法：网页中主要的划分区域的尺寸使用百分数（搭配 min-*、max-*属性使用），例如，设置网页主体的宽度为 80%，min-width 为 960px，而高度大都是用固定 px 数值。

  • 在 Web 前端开发的早期用来应对不同尺寸的 PC 屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式。它的主要问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用 px 来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调。

总结：流式布局响具有一定的响应式特性，但百分比是相对于父元素的，可能会因为嵌套导致计算复杂、尺寸控制精度低。此外，百分比无法解决所有响应式问题，如间距、字体大小等问题。个人理解是响应式布局的初级探索阶段或水平。

不同属性使用百分比单位时的参照对象基本上都是父元素

width、height --> 父元素
position top/bottom --> 定位父元素的 height; position left/right --> 定位父元素的 width
padding、margin --> 父元素的 width
border-radius、translate、background-size --> 都是自身

自适应布局 Adaptive Layout​

自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

根据不同设备屏幕分辨率，加载不同的页面版本，但是具体的实现可以进一步升级为响应式，比如：PC 端一套固定式布局或者流式布局针对大尺寸设备，移动端等设备是另一套响应式布局。

响应式布局 Responsive Layout​

响应式设计的目标是确保一个页面一套代码在所有终端上（各种尺寸的 PC、手机、平板 Web 浏览器等）都能显示出令人满意的效果，对 CSS 编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局 + 弹性布局，再搭配媒体查询技术使用。同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。 网页在不同设备（手机、平板、PC 等）上自动调整布局、内容和交互方式的设计方案，核心目标是 “一套代码，多端适配”

技术要点

  • 媒体查询（@media）

  • 使用弹性单位定义元素的尺寸或位置

    • rem(即 Root Em)，是基于根元素（<html>）的 font-size 的单位

    合理选择基准值，以设计稿宽度为基准（如 750px），设置 1rem = 100px 便于计算

    • vw/vh，将元素尺寸与浏览器视口宽度直接绑定，实现页面在不同设备上的缩放。其本质也是一种百分比。

    1vw 等于浏览器视口宽度的 1%
    公式：元素部件的设计稿尺寸（px）÷ 设计稿宽度 × 100 = 元素部件的 vw 值

  • 限制极值

  • 使用 clamp() 、max() 和 min() 函数限制范围

  • 混合使用单位，固定的细节使用 px

  • CSS3 布局模型，动态分配空间

    • 弹性盒子 Flexbox，一维布局模型，适合在单一方向（行或列）上分配空间
    • CSS Grid

移动端布局​

移动端的三个概念：1.布局视口、2.视觉视口、3. 理想视口

布局视口

在 PC 端，视口的默认宽度和浏览器窗口的宽度一致。

早期 PC 端网页宽度一般都为：960px ~ 1024px 这个范围，就算超出了该范围，这个区域也依然是版心的位置。移动端兴起后，为了将已存在的难以计数的 PC 端页面显示到移动设备上，浏览器厂商针对移动端设备设计了一个容器，先用这个容器去承装 PC 端的网页，这容器的宽度一般是 980px，不同的设备可能有所差异，但相差并不大。随后将这个容器等比例压缩到与手机等宽，这样就可以保证没有滚动条且能完整呈现页面，但是这样做有时会有问题：网页内容被压缩的太小，严重影响用户体验，而且可能移动设备浏览器网页高度不够，会有留白。

移动端获取布局视口方式：document.documentElement.clientWidth

注意：布局视口经过压缩后，横向的宽度用 css 像素表达就不再是 375px 了，而是 980px

布局视口

视觉视口

视觉视口就是用户可见的区域，它的绝对宽度永远和设备屏幕一样宽，但是这个宽度里所包含的 css 像素值在不同设备上是不同的。 移动端获取视觉视口方式：window.innerWidth 部分设备无法获取

iPhone6 为例：

  • 物理像素：750px
  • 设备独立像素：375px
  • css 像素：980px
理想视口

与屏幕（设备独立像素）等宽的布局视口，称之为理想视口，所以也可以说理想视口是一种标准：让布局视口宽度 与 屏幕等宽（设备独立像素），靠 meta 标签实现。 以 iPhone6 为例，符合理想视口标准之后：设备独立像素：375px，布局视口宽度：375px。用户不需要缩放、滚动就能看到网站的全部内容。

<meta name="viewport" content="width=device-width" />

meta 标签​

理想视口是一种事实上的标准：让布局视口宽度 与 屏幕等宽（设备独立像素），靠 meta 标签实现。主要用于控制网页在移动设备上的显示方式

核心作用

  • 将视口宽度设置为设备的实际宽度。
  • 初始缩放比例为 1:1。
  • 禁止用户放大或缩小页面。
<meta
  name="viewport"
  content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;"
/>

理想视口的特点：

  • 布局视口和屏幕等宽，以 iPhone8 为例，符合理想视口标准之后：设备独立像素：375px，布局视口宽度：375px
  • 用户不需要缩放、滚动就能看到网站的全部内容
  • 要为移动端设备单独设计一个布局效果

viewport 出现的背景因素
在移动设备普及之前，网页主要为桌面显示器设计，移动浏览器为了显示非响应式网页，会默认将视口宽度设为较大值（如 980px），然后缩小整个页面以适应屏幕。这会导致文字过小、按钮难以点击等问题。通过设置 width=device-width 和 initial-scale=1.0，可以让页面按照设备的实际尺寸渲染，避免不必要的缩放，从而实现更好的移动体验。
与响应式设计的关系
viewport 是响应式设计的基础，但它本身并不实现响应式布局。响应式设计还需要结合 CSS 媒体查询、弹性布局等技术。

移动端布局总结​

移动端设计开发协作流程图

  1. 将布局视口设为理想视口，"width=device-width; initial-scale=1.0;"
  2. 找好基准值，设计师标注 UI 部件尺寸都是用 px 单位的，当只有一个宽度的设计稿时，开发者就要找到一个基准值，方便对多种尺寸设备进行适配。
    例如：找一个方便的计算的基准单位 100px，即 html 的字体样式为 "font-size: 100px;"。此时，"1rem = 100px"。这样的话设计稿上 "36px" 的尺寸值就可以用极低的心智计算得到 "0.36rem"。其计算公式为：设计稿尺寸值 px / 100 得到 rem 单位的尺寸值。
  3. 动态调整 rem，找到设计稿尺寸对应的设备，得到设备理想视口下宽度，如：375。计算公式：设备横向独立像素值 / 设计稿对应的设备理想视口宽度 * 100
//获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
const dpWidth = document.documentElement.clientWidth
//计算根字体大小，若设计稿宽度为750，对应的设备理想视口的宽度为375，此时正好可以将 rem 设为 100px
//若用户设备理想视口宽度大于375，则 rem 的值会适当的加大，达到适配的目的
const rootFonstSize = (dpWidth / 375) * 100
//设置根字体大小
document.documentElement.style.fontSize = rootFonstSize + 'px'

为什么选择 1rem = 100px？
计算方便：100px = 1rem，50px = 0.5rem，避免复杂小数。适合大多数移动端项目。

如何避免字体过大？
对字体使用  px  或  em，而非  rem（防止缩放后过大）。
或通过媒体查询限制最小字体

@media (max-width: 480px) { html { font-size: 50px; } }

rem 布局适配原理​

rem 是 css 中的长度单位，1rem=根元素 html 的 font-size 值。页面元素尺寸和根元素 font-size 值强耦合。

核心思想： rem 本质是一种更好的百分比布局
实现手段：
方法一，预设一个方便计算的基准值，如：100px。找到与设计稿尺寸物理像素匹配的设备，将视口宽度设备为以此设备的独立设备像素数值。
方法二，获取当前视口宽度 width，除以一个固定的数 n，得到 rem 的值。表达式为 rem = width / n。通过此方法，rem 大小始终为 width 的 n 等分。 动态设定：在浏览器窗口尺寸变化(resize)或者设备屏幕旋转(orientationchange)后重新设定基准值。

rem 和 vw 结合使用​

仍然以设计稿宽 750px ，因布局视口宽度等于设备独立像素值，为 375px。目标基准值仍为 100px。

此时： 100vw -> 375px
       ? vw -> 100px

则形成一个比例关系，得到 26.66667vw ≈ 100px

因此，html 的 font-size 设为 26.66667vw

关于基准值，它不是固定的，也没有约定俗称的数值，可以根据实际情况自行决定。基准值的核心目标是简化换算，同时避免极端值导致布局失控

直接使用 vw 单位​

直接使用 vw 就不需要像 rem 那样，在 js 中去动态设置根元素的 font-size 了。 还可以根据情况使用 vh vmin vmax 单位

媒体查询​

媒体查询布局常用的响应断点阈值设定(括号后面是样式类的缩写)

  • 媒体查询之逻辑运算符：and not only

  • 媒体查询之常见宽度值

 <576px （Extra small）
 >=576px （Small --- sm）
 >=769px （Medium --- md）
 >=992px （Large --- lg）
 >=1200px （X-Large --- xl）
 >=1400px （XX-Large ---- xxl）
  • 媒体查询之特征
    • width: 视口宽
    • max-width: 视口宽度最大值
    • min-width: 视口宽度最小值
    • orientation: 屏幕方向，portrait（竖屏） landscape（横屏）
  • 媒体查询之书写顺序，先写默认值，使用 min-width 从小到大；使用 max-width 从大到小
使用 min-width 要按“从小到大”的顺序
<style>
  body {
    background-color: #000;
  }
  @media screen and (min-width: 576px) {
    body {
      background-color: red;
    }
  }
  @media screen and (min-width: 769px) {
    body {
      background-color: yellow;
    }
  }
  @media screen and (min-width: 992px) {
    body {
      background-color: blue;
    }
  }
  @media screen and (min-width: 1200px) {
    body {
      background-color: green;
    }
  }
  @media screen and (min-width: 1400px) {
    body {
      background-color: orange;
    }
  }
</style>
使用 max-width 要按“从大到小”的顺序
<style>
  body {
    background-color: #000;
  }
  @media screen and (max-width: 1400px) {
    body {
      background-color: red;
    }
  }
  @media screen and (max-width: 1200px) {
    body {
      background-color: yellow;
    }
  }
  @media screen and (max-width: 992px) {
    body {
      background-color: blue;
    }
  }

  @media screen and (max-width: 769px) {
    body {
      background-color: green;
    }
  }
  @media screen and (max-width: 576px) {
    body {
      background-color: orange;
    }
  }
</style>

参考文章​

这次终于搞清楚移动端开发了(一)
这次终于搞清楚移动端开发了(二)
这次终于搞清楚移动端开发了(三)