基本概念

_Device Pixels_（设备像素）

屏幕上显示的任何画面，都是由一个个能够产生不同颜色的点构成，这些点叫做像素（Pixel）

我们将屏幕上的物理像素称为 “设备像素”，即设备屏幕上的实际像素点，数量固定

与设备物理像素相关的另一个概念是 _Pixels Per Inch_（每英寸像素数, PPI），它代表屏幕对角线的物理像素个数除以对角线英寸数，用于表示屏幕密度

_CSS Pixels_（CSS 像素）

CSS 像素是网页设计中常用的长度单位( px )，用于定义元素的尺寸、边距、字体大小等。 它是一种抽象的逻辑像素单位，数量可以根据设备的 DPR 进行缩放，因此数量与设备物理像素不一一对应

_Device Pixel Ratio_（设备像素比）

DPR 指的是设备物理像素数和 CSS 像素数的比例( DPR = 物理像素数 / CSS 像素数 )。在屏幕密度( PPI )高的设备上，为了保持元素的可读性和可点击性，浏览器会将多个物理像素映射为一个 CSS 像素。 这使得网页在不同设备上看起来大小一致

设备像素比( DPR )可以通过 window.devicePixelRatio API 来获取

https://cdn.jsdelivr.net/gh/k34869/picx-images-hosting@master/1000006205.4cl4xhn5xu.webp

_viewport_（视口）

在桌面端，视口通常指代浏览器的窗口，但不包括浏览器的 UI，菜单栏等

视口通常被细分为布局视口、视觉视口和理想视口

布局视口（Layout Viewport）

在没有手动设置布局视口的宽度下，移动端浏览器通常会默认设置一个较大的布局视口宽度，通常为 980px。这样做的目的是为了确保 PC 端的页面能够在移动端浏览器中完整显示，所以移动端浏览器在网页刚打开时会“缩放”，让整个页面塞进屏幕中

布局视口的宽度 ≈ document.documentElement.clinetWidth
布局视口的高度 ≈ document.documentElement.clinetHeight

其中 CSS 中 vw/vh 单位就是相对于布局视口

视觉视口（Visual Viewport）

视觉视口是用户真实可见的区域，当用户用手势放大网页时，视觉视口变小（显示的是局部放大），因此视觉视口的尺寸会随着用户手势放大/缩小实时变化，但布局视口大小不会发生变化

视觉视口的尺寸可以通过 window.visualViewport API 来获取，它会返回一个对象，其中包含了视觉视口的宽高、缩放比等参数。详细参考：https://developer.mozilla.org/zh-CN/docs/Web/API/VisualViewport

理想视口（Ideal Viewport）

移动端浏览器推荐的适配宽度（用来达到最佳显示效果），通常为设备的逻辑像素( CSS 像素 )宽度

一般我们用 meta viewport 来设置它

1
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

设置后，布局视口 = 视觉视口 ≈ 设备的逻辑像素( CSS 像素 )宽度

width 用来设置布局视口的宽度，device-width 代表使用设备的逻辑像素宽度作为布局视口宽度，也可以指定一个具体的数值( 单位 CSS 像素 )作为布局视口的宽度

initial-scale 用来设置初始缩放比，它会改变视觉视口的大小，1 代表网页刚打开时不缩放，取值范围 0.0-10.0

user-scalable 用来设置是否允许用户手势放大或缩小网页，值为 no 则不允许，值为 yes 则允许

移动设备与传统 PC 的差异

移动设备和传统 PC 在屏幕尺寸、交互方式方面存在根本差异，用户界面需要适应用户的设备以提供良好的用户体验

  • 屏幕尺寸
    • 移动设备通常在 3~7 英寸( 手机 )
    • 传统 PC 通常在 13~32 英寸
  • 屏幕密度
    • 移动设备屏幕密度( PPI )高，DPR 通常 ≥2
    • 传统 PC 屏幕密度略低，DPR 一般为 1
  • 视口宽度
    • 移动设备常见为 360~430px
    • 传统 PC 通常为 1024px 以上
  • 交互方式
    • 移动设备为手指触摸操作
    • 传统 PC 主要以鼠标和键盘操作

rem 移动端自适应布局

rem 是 CSS 中的相对单位

  • rem 相对于根元素 html 的 font-size，如根元素 font-size 为 16px，则 2rem 等于 2 倍的 16px

rem 移动端适配方案的原理是通过动态设置 <html> 的 font-size，让整个页面的 rem 单位和屏幕宽度绑定，从而实现不同屏幕宽度下的等比例缩放布局

  1. 设置 meta viewport
1
2
3
4
<!--
	设置视口宽度 = device-width, 即设备逻辑像素宽度, 该值是一个动态值, 它是移动端设备最理想的视口宽度
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
  1. 使用 JavaScript 动态设置 html 的 font-size
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 获取 html 元素
const rootElement = document.documentElement;

// setRam 函数, 用来动态设置 html font-size
function setRem() {
	/*
		clientWidth / 10
		将当前设备的逻辑像素宽度 除于 10
		假设设计稿宽度为375px, 则 1rem 等于 375 / 10 = 37.5px
	*/
	const rem = rootElement.clientWidth / 10 + 'px';
	/*
		将计算获取的动态值设置为 html 的 font-size
	*/
	rootElement.style.fontSize = rem;
}

// 添加 resize 事件监听, 当窗口尺寸发生变化时执行 setRem 函数, 以更新 html font-size
window.addEventListener('resize', setRem);

// 页面刚打开时, 执行一次 setRem 函数, 初始化 html font-size
setRem();
  1. 写 CSS 时使用 rem 单位
1
2
3
4
5
6
.box {
  width: 2rem; /* 假设设计稿的宽度为375px, 则 2rem = 2 * 37.5 = 75px */
  height: 2rem;
  font-size: 0.28rem;
  background-color: blue;
}

可优化项：

  • 使用构建工具的 postcss-pxtorem 插件自动将 px 转为 rem
  • 使用媒体查询控制最大最小宽度，避免过大/过小设备出问题

Tips：

  • rem 搭配 meta viewport 实现页面的等比例缩放，它的本质是一种缩放式的静态布局，它可以做到适配不同手机屏幕宽度/分辨率
  • 这种布局方式还可以通过 vw 单位实现，vw 是直接相对于视口宽度，因此它不需要额外编写 js 代码
  • 对于需要灵活排版的页面，这种布局可能不太适合

响应式网页设计

响应式网页设计（Responsive Web Design，简称 RWD）是一种网页开发技术，旨在使网页在不同设备（如手机、平板、桌面电脑）上都具有良好的显示效果和用户体验。其核心目标是“一次开发，多端适配”

https://github.com/k34869/picx-images-hosting/raw/master/image.2rvf9onq2c.webp

设计原则

  1. 使用相对单位（如 %、em、rem）替代固定单位（如 px），使网页元素根据屏幕宽度自动伸缩
  2. 通过 CSS 的 @media 规则，根据不同设备的特性（屏幕宽度、方向等）应用不同样式
1
2
3
4
5
6
/* 例子 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}
  1. 使用 CSS Grid / Flex，实现 页面元素的弹性拉伸 或 多列排布自动换行…
  2. 移动端要在 <head> 中设置 meta viewport，使移动设备正确渲染网页
1
<meta name="viewport" content="width=device-width, initial-scale=1">

媒体查询（Media Queries）

CSS 媒体查询允许开发者根据设备的特性（如屏幕宽度、分辨率、方向等）来应用不同的 CSS 样式。它是实现响应式网页设计的核心工具之一

基本语法：

1
2
3
@media 条件 {
  /* 适用于符合上述条件的样式 */
}

媒体特性( 常用 )：

  • max-width：最大宽度，适用于屏幕宽度小于等于某个值的情况
  • min-width：最小宽度，适用于屏幕宽度大于等于某个值的情况
  • max-height：最大高度，适用于屏幕高度小于等于某个值的情况
  • min-height：最小高度，适用于屏幕高度大于等于某个值的情况
  • orientation：设备的方向，可以是 portrait（竖屏）或 landscape（横屏）
1
2
3
4
5
6
7
8
9
10
11
12
13
/* 屏幕宽度小于等于768px时，应用此样式 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* 屏幕宽度大于等于768px时，应用此样式 */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

媒体类型：

  • all：适用于所有媒体类型
  • print：用于打印设备
  • screen：用于计算机屏幕（如 平板电脑和智能手机等）
  • speech： 用于大声“朗读”页面的屏幕阅读器
1
2
3
4
5
6
/* 屏幕宽度小于等于480px, 同时为计算机屏幕设备时应用此样式 */
@media screen and (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

断点（Break Point）

断点是控制何时可以在特定的屏幕或设备大小下更改布局

常见断点：

设备类型宽度范围
手机（小屏）0 - 576px
平板电脑577px - 768px
小型桌面，如笔记本电脑769px - 992px
中大型桌面，如台式机993px - 1200px
超大屏幕，如电视1201px 以上