zhangdizhangdi

响应式

简介

  1. 响应式设计 (Responsive)：
    • 目标：一套代码，同时兼容 PC、平板、手机。
    • 核心技术：媒体查询 (@media) + 流式布局 (百分比/Flex)。
    • 特点：页面结构会随屏幕变化而“变形”或“重排”（例如三栏变一栏）。
  2. 移动端适配 (Mobile Adaptation)：
    • 目标：专门针对移动端（手机）的不同屏幕宽度（如 iPhone SE vs iPhone 14 Pro Max）进行等比缩放。
    • 核心技术：rem 或 vw。
    • 特点：页面结构不变，只是整体元素按照比例放大缩小。

⭐ 一、什么是响应式设计？

响应式设计（Responsive Design） 是指：

页面布局会根据不同的屏幕尺寸、像素密度、方向自动调整。
实现“同一套代码，适配多端（PC / 平板 / 手机）”。

核心：流式布局（fluid layout） + 断点（breakpoints） + 弹性字体 + 自适应图片。

⭐ 二、移动端适配的核心点

移动端适配主要解决两个问题：

不同分辨率（设备宽度不同）

不同 DPR（设备像素比不同，如 iPhone 3x）

解决方式：meta viewport + rem + 媒体查询 + 弹性布局。

单位

  • px：绝对单位，页面按精确像素展示
    • vw：相对单位，视口的宽度，100vw 即视口宽度的100%
    • vh：相对单位，视口的高度，100vh 即视口高度的100%
    • vmin：选取 vw 和 vh 中最小的那个
    • vmax：选取 vw 和 vh 中最大的那个
  • rem：相对单位，相对于根节点html的字体大小来计算
  • em：相对单位，相对于父节点字体的大小，如果自身定义了font-size按自身来计算
参考

Viewport 视口

html
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
  • width=device-width：让渲染宽度等于设备物理宽度。
  • initial-scale=1.0：初始缩放比例为 1:1。
  • user-scalable=no：禁止用户手动缩放（视需求而定，为了无障碍访问通常不建议强制禁止，但 Web App 开发中常用）。

@media 媒体查询

图片