当前位置：首页 > web >正文

第二章支线四 ·响应圣坛：媒体查询与移动适配

web 2025/7/14 20:46:32

主线回顾

第二章：CSS秘典 · 色彩与布局的力量

其他支线

支线一：影之殿堂 · 阴影与过渡魔法
支线二：浮空之域：布局法则深研
支线三 ·CSS炼金术：动画与变换高级奥义

🎬 剧情设定：

林昊获得炽光指环后，天穹裂开，一道七彩光桥将他带入遥远之地——响应圣坛。圣坛漂浮于千屏世界之上，不同尺寸的魔法终端从地底浮现，纷纷发出混乱信号。

古代圣灵「维适」现身，低语道：“唯有掌握‘响应律法’者，方可平息终端之乱。”

📏 第一阶段：视口认知与百分比布局

圣坛试炼首先开启视口之镜，让林昊理解设备本质。

教学点 1：视口（viewport）

移动设备有自己的浏览窗口，称为视口
网页必须添加以下标签让 CSS 正确识别视口宽度：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

教学点 2：流式布局单位

单位	含义
%	当前父容器的百分比
vw	视口宽度的百分比
vh	视口高度的百分比

.container {width: 90%;padding: 2vw;
}

圣灵点评：“理解‘相对’的概念，才不会被固定尺寸禁锢。”

🔀 第二阶段：媒体查询魔法（Media Query）

第二道考验浮现：使用媒体查询在不同设备上呈现不同布局。

示例：改变导航栏布局

<nav class="menu"><a href="#">首页</a><a href="#">关于</a><a href="#">联系</a>
</nav>

.menu {display: flex;gap: 20px;justify-content: center;
}/* 移动设备下垂直排列 */
@media (max-width: 600px) {.menu {flex-direction: column;align-items: center;}
}

🎯 媒体查询基础语法：

@media (max-width: 768px) {/* 针对最大宽度768px及以下的设备 */
}

常见断点推荐（仅供参考）：

设备类型	宽度范围
手机	max-width: 600px
平板	601px ~ 1024px
桌面	1025px 以上

📐 第三阶段：响应式网格设计（结合 Grid / Flex）

圣坛主屏浮现，要求林昊设计一个响应式卡片宫格，自动适配各种屏幕：

HTML：

<div class="grid-container"><div class="card">A</div><div class="card">B</div><div class="card">C</div><div class="card">D</div>
</div>

CSS:

.grid-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 20px;
}.card {background: white;padding: 20px;border-radius: 10px;box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

教学点：

auto-fit + minmax() 是响应式布局的神器
根据容器宽度自动决定显示几列
没有写媒体查询，也能适应多尺寸！

🌠 第四阶段：图片与字体的适配

圣坛边缘升起「视界之镜」，考验图像与文本在不同尺寸下的表现。

图片响应方式：

img {max-width: 100%;height: auto;
}

字体大小响应方式：

h1 {font-size: clamp(24px, 5vw, 40px);
}

🧠 总结魔典 · 响应式设计核心咒语

技能	技法
适配视口	标签
自适应单位	%、vw、vh、em、clamp()
响应式断点	@media (max-width: Xpx)
自适应布局	auto-fit + minmax()
图片适配	max-width: 100%