一、什么是响应式布局 响应式布局是一种面向多终端的网页设计与实现方法，其核心目标是使网页能够根据访问设备的屏幕物理尺寸、分辨率、屏幕方向及视口宽度等关键参数，自动调整页面的布局结构、元素尺寸、内容排版及交互组件的展示形态。 该方法通过统一的代码基座，确保网页在桌面端、平板端、移动端等不同终端上均能提供一致性、可用性与适配性俱佳的用户体验，无需为各终端单独设计和维护独立的网页版本，从而降低开发与迭代…
响应式布局是一种面向多终端的网页设计与实现方法，其核心目标是使网页能够根据访问设备的屏幕物理尺寸、分辨率、屏幕方向及视口宽度等关键参数，自动调整页面的布局结构、元素尺寸、内容排版及交互组件的展示形态。
该方法通过统一的代码基座，确保网页在桌面端、平板端、移动端等不同终端上均能提供一致性、可用性与适配性俱佳的用户体验，无需为各终端单独设计和维护独立的网页版本，从而降低开发与迭代成本，提升跨终端访问的兼容性与稳定性。
基于设备的屏幕尺寸、分辨率、方向等参数自动调整页面结构与样式，无需为不同终端开发独立版本，实现一套代码适配全场景。
页面元素采用相对单位（如百分比、rem、vw/vh）替代固定像素值，可随容器或视口大小按比例缩放，保证在不同尺寸屏幕下的显示协调性。
通过 CSS 媒体查询技术设定关键断点，在不同断点区间加载对应的样式规则，使页面布局在特定屏幕尺寸下发生合理变化，匹配设备的交互习惯。
根据终端屏幕大小智能调整内容的展示优先级，在小屏设备上优先呈现核心信息，次要内容可折叠或隐藏，保障用户的核心浏览需求。
统一的代码基座减少了多版本开发、测试与维护的工作量，降低迭代成本，同时提升跨终端的功能一致性与兼容性。
网页在桌面端、平板端、移动端等不同设备上，均能保持清晰的内容展示、合理的交互逻辑和舒适的操作流程，避免出现内容溢出、排版错乱或操作按钮难以点击的问题。
针对不同屏幕尺寸智能筛选和排序内容，在小屏设备上聚焦核心信息，次要内容可通过折叠、跳转等方式呈现，确保用户快速获取关键内容。
仅需维护一套代码基座，无需为不同终端单独开发、测试和迭代版本，大幅减少人力和时间成本，提升产品的更新迭代效率。
适配不同设备的屏幕方向、分辨率和浏览器特性，减少因设备差异导致的兼容性问题，扩大网页的适用范围和访问人群。
弹性布局（Flexbox）是 CSS3 中的一种布局模式，专门用于在容器内对子元素进行排列、对齐和分配空间。它特别适用于响应式设计，能够轻松实现复杂的布局需求。
主要特点：
容器属性
| 属性 | 描述 | 可选值 |
|---|---|---|
| flex-direction | 定义主轴方向 | row, row-reverse, column, column-reverse |
| flex-wrap | 控制是否换行显示 | nowrap, wrap, wrap-reverse |
| flex-flow | flex-direction 和 flex-wrap 的简写 | - |
| justify-content | 主轴上的对齐方式 | flex-start, flex-end, center, space-between, space-around, space-evenly |
| align-items | 交叉轴上单行项目的对齐方式 | stretch, flex-start, flex-end, center, baseline |
| align-content | 交叉轴上多行项目的对齐方式 | stretch, flex-start, flex-end, center, space-between, space-around |
项目属性
| 属性 | 描述 | 可选值 |
|---|---|---|
| flex-grow | 放大比例 | 非负数字 |
| flex-shrink | 缩小比例 | 非负数字 |
| flex-basis | 初始大小 | 长度值、百分比、auto |
| flex | flex-grow, flex-shrink, flex-basis 的简写 | - |
| align-self | 单个项目与其他项目的对齐方式 | auto, flex-start, flex-end, center, baseline, stretch |
| order | 项目的排列顺序 | 整数 |
CSS Grid Layout（网格布局）是 CSS 中一个强大的二维布局系统，允许我们精确地控制行和列的布局，非常适合构建复杂的网页布局。
主要特点
容器属性
| 属性 | 描述 | 可选值 |
|---|---|---|
| grid-column-start | 指定项目开始的列线 | - |
| grid-column-end | 指定项目结束的列线 | - |
| grid-row-start | 指定项目开始的行线 | - |
| grid-row-end | 指定项目结束的行线 | - |
| grid-column | grid-column-start 和 grid-column-end 的简写 | / |
| grid-row | grid-row-start 和 grid-row-end 的简写 | / |
| grid-area | 指定项目在网格中的位置 | / / / |
| justify-self | 控制单个项目在单元格内的水平对齐 | start |
| align-self | 控制单个项目在单元格内的垂直对齐 | start |
| place-self | 同时设置单个项目在单元格内的水平和垂直对齐 | - |
特殊值和函数
| 名称 | 描述 | 语法 |
|---|---|---|
| fr 单位 | 代表网格容器中可用空间的一部分 | - |
| repeat() | 重复列或行的定义 | repeat(, …) |
| minmax() | 定义尺寸范围 | minmax(, ) |
| auto-fill | 自动填充尽可能多的轨道 | - |
| auto-fit | 类似 auto-fill，但会拉伸轨道以填满容器 | - |
| span | 指定项目跨越多少个轨道 | span |
项目属性
| 属性 | 对应独立属性 | 可选值 |
|---|---|---|
| grid-template | grid-template-rows, grid-template-columns, grid-template-areas | grid-template: 100px 1fr / 50px 1fr; |
| gap | grid-row-gap, grid-column-gap | gap: 10px 20px; |
| place-items | align-items, justify-items | place-items: center start; |
| place-content | align-content, justify-content | place-content: end center; |
| place-self | align-self, justify-self | place-self: end stretch; |
媒体查询是一种 CSS 技术，允许根据设备特性（如屏幕宽度、高度、分辨率等）应用不同的样式规则，从而实现响应式设计，让网页在不同设备上都能良好显示。
注意事项
/* 媒体类型：mediatype
all 所有设备（默认）、print 打印设备、screen 彩色屏幕设备、speech 屏幕阅读器 */
/* 逻辑操作符：and|not|only
not：匹配除屏幕外的所有媒体类型
only：仅匹配屏幕设备
and：连接多个条件（逻辑与） */
@media screen and (min-width: 768px) and (max-width: 1024px), print and (orientation: landscape) {
/* ... */
}
媒体查询常用宽度划分
流式布局是一种使用相对单位（如百分比）而非固定像素值来创建网页布局的方法，使页面元素能够根据浏览器窗口大小自动调整尺寸，实现自适应显示效果。
核心特点：
| 单位 | 类型 | 描述 | 应用场景 |
|---|---|---|---|
| % | 相对单位 | 相对于父元素的百分比 | 流式布局基础单位 |
| em | 相对单位 | 相对于当前元素字体大小 | 字体大小、内边距 |
| rem | 相对单位 | 相对于根元素字体大小 | 统一的相对尺寸 |
| vw | 视口单位 | 视口宽度的 1% | 全屏宽度相关设计 |
| vh | 视口单位 | 视口高度的 1% | 全屏高度相关设计 |
| vmin | 视口单位 | vw 和 vh 中较小值 | 响应式字体大小 |
| vmax | 视口单位 | vw 和 vh 中较大值 | 响应式最大尺寸 |
文字排版响应式是指让网页中的文字内容根据不同设备屏幕尺寸和分辨率自动调整大小、行高、间距等属性，以确保在各种设备上都有良好的可读性和视觉效果。
rem 和 em 区别
| 特性 | EM | REM |
|---|---|---|
| 参照对象 | 父元素字体大小 | 根元素字体大小 |
| 继承性 | 会继承并累积 | 不会累积 |
| 计算方式 | 相对计算 | 绝对计算 |
| 复杂度 | 容易产生复杂计算 | 计算简单直观 |
| 控制性 | 局部影响 | 全局影响 |
栅格布局是一种将页面划分为规则的行列结构的布局方式，通过预先定义的网格系统来组织和排列页面元素，实现整齐、一致的视觉效果和高效的布局管理。
核心特点
基本组件
| 组件 | 作用 | 说明 |
|---|---|---|
| container | 容器 | 包裹整个栅格系统的容器 |
| row | 行 | 水平排列列的容器 |
| col | 列 | 栅格的基本单位 |
| gutter | 间隔 | 列与列之间的间距 |
第三方技术框架 Bootstrap
三种模式：
scaledStyles() {
const scale = this.scalePercentage / 100;
const width = this.baseWidth;
switch(this.scaleMode) {
case 'transform':
return { width: width + 'px', transform: `scale(${scale})`, transformOrigin: 'top left' };
case 'viewport':
// 使用 viewport units 模拟缩放
const scaleFactor = scale;
return { width: (width * scaleFactor) + 'px', fontSize: (16 * scaleFactor) + 'px' };
case 'rem':
// 使用 REM units 控制缩放
const rootFontSize = 16 * scale;
return { width: width + 'px', fontSize: (rootFontSize / 16) + 'rem' };
default:
return {};
}
}
网页开发、App 模块等常见场景。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online