响应式布局

布局方案

响应式布局：媒体查询、相对单位（如百分比、vw/vh、rem 等）
自适应布局：例如左右两边宽度固定，中间宽度自适应
弹性布局：使用相对单位，结合 flex 或 grid 布局

通常说弹性布局就是指 flex 布局

Web、H5、WebApp

移动 Web 开发，代码是在手机、平板等浏览器中运行
Pc Web 开发，代码是在 PC 端（电脑）浏览器中运行

移动 Web 和 Pc Web 的区别：

屏幕尺寸不同
网络环境和设备性能不同
交互方式不同
兼容性不同

App 开发分类：

Native 开发，如 Android 开发、IOS 开发
Web App，应用程序在浏览器中运行
Hybrid 混合模式，是 Native APP 和 Web APP 的混合体，同时具有两者的特点

H5 在非技术圈常指移动 Web 页面，一般是用于活动营销的手机网页

像素、分辨率、物理像素、逻辑像素、设备像素比

设备像素指的是物理像素，一般手机的分辨率指的就是设备像素，一个设备的设备像素是不可变的。

css 像素和设备独立像素是等价的，不管在何种分辨率的设备上，css 像素的大小应该是一致的，css 像素是一个相对单位，它是相对于设备像素的，一个 css 像素的大小取决于页面缩放程度和 dpr 的大小。

dpr 指的是设备像素和设备独立像素的比值，一般的 pc 屏幕，dpr=1。在 iphone4 时，苹果推出了 retina 屏幕，它的 dpr 为 2。屏幕的缩放会改变 dpr 的值。

ppi 指的是每英寸的物理像素的密度，ppi 越大，屏幕的分辨率越大。

viewport 视口

移动端：

大部分手机浏览器的宽为 980px
手机端网页中 html 的默认宽等于浏览器宽为 980px
将 body 的 margin 设为 0 后，body 的宽度等于 980px

运行下方代码，打开控制台调到手机模式，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body></body>
</html>

移动端的三个 viewport 的概念

布局视口

移动端浏览器提供了一个 layout viewport 布局视口的概念，使用这个视口来对页面进行布局展示，一般 layout viewport 的大小为 980px，因此页面布局不会有太大的变化，我们可以通过拖动和缩放来查看到这个页面。

视觉视口

visual viewport 指的是移动设备上我们可见的区域的视口大小，一般为屏幕的分辨率的大小。visual viewport 和 layout viewport 的关系，就像是我们通过窗户看外面的风景，视觉视口就是窗户，而外面的风景就是布局视口中的网页内容。

理想视口

由于 layout viewport 一般比 visual viewport 要大，所以想要看到整个页面必须通过拖动和缩放才能实现。所以又提出了 ideal viewport 的概念，ideal viewport 下用户不用缩放和滚动条就能够查看到整个页面，并且页面在不同分辨率下显示的内容大小相同。ideal viewport 其实就是通过修改 layout viewport 的大小，让它等于设备的宽度，这个宽度可以理解为是设备独立像素，因此根据 ideal viewport 设计的页面，在不同分辨率的屏幕下，显示应该相同。

https://juejin.cn/post/6844903655045333000

em、rem、px、vw、vh 的区别

像素单位

1、px

绝对单位
指定像素值，固定布局尺寸

2、rem

相对根元素 html 的 font-size 值的大小
1rem 等于根元素的字体大小
不受自身和父级元素的字体大小的影响
为了计算方便，可以设置html { font-size: 62.5% }，因为16 * 0.625 = 10，这样 1rem=10px

3、em

相对单位。基于父元素字体大小，也可理解成继承的字体大小
如果元素自身设置了字体大小，则基于元素自身的字体大小

.wrap {
  font-size: 16px;
}
.box {
  width: 6em;
  height: 6em;
  font-size: 18px;
}

4、vw

视窗宽度单位
1vw 等于视窗宽度的 1%

5、vh

视窗高度单位
1vh 等于视窗高度的 1%

6、vmax 和 vmin

视窗宽度和视窗高度的最大值或最小值，哪个最大或最小就取哪个值，可以考虑用在兼容横屏和竖屏的布局

7、百分比%，相对于父元素

媒体查询

CSS 媒体查询是指设置断点，根据设备屏幕宽度应用不同的样式。

PC 端优先：先考虑大屏，再考虑小屏；使用 max-width
移动端优先：先考虑最小屏，再考虑大屏；使用 min-width

使用方式：

/* 默认样式 */
body {
  font-size: 16px;
}
/* 所有设备 */
@media (max-width: 1200px) {
  body {
    font-size: 14px;
  }
}
/* 屏幕设备 */
@media screen and (max-width: 1200px) {
  body {
    font-size: 14px;
  }
}
/* 限制范围 */
@media (min-width: 1100px) and (max-width: 1200px) {
  body {
    font-size: 12px;
  }
}

媒体类型

all：所有设备，默认值
screen：屏幕设备
print：打印设备
speech：屏幕阅读器

移动端常见断点

形式	尺寸	说明
xs	`<576px`	超小屏
sm	576~768px	小屏
md	768px~992px	中屏
lg	992px~1200px	大屏
xl	≥1200px	超大屏

常用媒体查询：

@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1536px) {
}
@media screen and (max-width: 1440px) {
}
@media screen and (max-width: 1366px) {
}
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 1200px) {
}

window.matchMedia()

window.matchMedia() 可判定是否匹配媒体查询。

const mediaQueryString = '(max-width: 600px)';
let media = window.matchMedia(mediaQueryString);

const listener = () => console.log(media.matches);
window.addEventListener('resize', listener);
window.removeEventListener('resize', listener);

屏幕分辨率

尺寸	比例	说明
3840 x 2160		4k
2560 x 1440		2k
1920 x 1080	16:9	✅ 主流
1920 x 1200	16:10	常见 20 寸电脑使用
1680 x 1050	16:10	常见 15.4、20 寸电脑使用
1600 x 1200	4:3	常见 15、16.1 寸电脑使用
1600 x 1024	14:9	不常见
1600 x 900	16:9	非主流
1536 x 864	16:9
1440 x 1050	4:3	常见 15、16.1 寸电脑使用
1440 x 900	16:10	苹果 17 寸电脑使用
1366 x 768	15:10	✅ 主流，常见 15.2 寸电脑使用
1280 x 1024	5:4	常见 14.1、15 寸电脑使用
1280 x 854	16:9	不常见
1280 x 800	16:10	常见 10.8、12.1、15.4 寸电脑使用
1200 x 700	12:7
1024 x 768	4:3	常见 10.4、12.1、14.1、15 寸电脑使用
1024 x 600		常见 8.9 寸电脑使用

移动端适配方案

使用 viewport 元标签

viewport 是移动端适配的基础，用于控制页面的缩放和布局。

<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
maximum-scale=1.0：最大缩放比例为 1
user-scalable=no：禁止用户缩放页面

移动端优先

采用移动端优先的设计策略，先为小屏幕设备编写样式，再通过媒体查询逐步增强大屏幕的样式。

/* 移动端默认样式 */
body {
  font-size: 14px;
}

/* 大屏幕样式 */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

CSS 框架

使用现成的 CSS 框架（如 Tailwind CSS、Bootstrap）可以快速实现响应式布局。推荐使用 Tailwind CSS 方案，其默认使用 rem 单位、支持媒体查询。

<div class="flex flex-wrap">
  <div class="w-full md:w-1/2 lg:w-1/3">Column 1</div>
  <div class="w-full md:w-1/2 lg:w-1/3">Column 2</div>
</div>

图片适配

使用 max-width: 100% 防止图片超出容器。

rem + 弹性布局

设置根元素 html 的 font-size，根据屏幕宽度动态计算 rem 值。

html {
  /* 或者 62.5% */
  font-size: 10px;
}

自动设置 html 元素的字体大小：

function setRootFontSize() {
  const baseFontSize = 16;
  const designWidth = 1920;
  const screenWidth = window.innerWidth;
  const newSize = (screenWidth / designWidth) * baseFontSize;
  document.documentElement.style.fontSize = newSize + 'px';
}
window.addEventListener('load', setRootFontSize);
window.addEventListener('resize', setRootFontSize);

然后就可以使用 rem 单位了，但是设计稿上是 px 单位，手动将 px 转为 rem 很麻烦。我们可以在编写代码时依然使用 px 单位，然后借助工具自动将 px 转为 rem。

自动转换的方式：

使用 PostCSS 插件：postcss-pxtorem
使用 vscode 插件：px to rem & rpx & vw (cssrem)

例如，使用 PostCSS 插件自动将 px 转为 rem：

安装 postcss-pxtorem

npm install postcss-pxtorem -D

配置 postcss.config.js

// postcss.config.cjs
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // 基准值，对应于根元素的 font-size
      unitPrecision: 5, // 保留小数点位数
      propList: ['*', '!min-width', '!max-width'], // 排除 min-width 和 max-width 属性
      selectorBlackList: [], // 忽略的选择器
      replace: true, // 替换而不是添加备用属性
      mediaQuery: false, // 允许在媒体查询中转换 px
      minPixelValue: 0 // 最小的转换数值
    }
  }
};

// 在vite中使用
export default defineConfig({
  css: {
    postcss: './postcss.config.cjs'
  }
});

布局方案​

Web、H5、WebApp​

像素、分辨率、物理像素、逻辑像素、设备像素比​

viewport 视口​

em、rem、px、vw、vh 的区别​

像素单位​

媒体查询​

媒体类型​

移动端常见断点​

window.matchMedia()​

屏幕分辨率​

移动端适配方案​

使用 viewport 元标签​

移动端优先​

CSS 框架​

图片适配​

rem + 弹性布局​