正在加载...

HTML 响应式

布局之后是响应式：同一 URL 要在手机和桌面都可用。HTML 从 viewport 开始；CSS 收尾。

一个 URL，多种宽度

不必单独做移动版 HTML。1200px 习惯会造成横向滚动。

直接回答

1) viewport meta。2) 流式宽度。3) img max-width:100%。媒体查询属于 CSS 课。

📊 HTML unlocks vs CSS responsive tools

Layer	Job for responsiveness	Examples
HTML viewport	Tell mobile browsers how to size the layout viewport	meta name="viewport" with width=device-width
HTML structure	Keep landmarks and flexible wrappers that can reflow	header, main, aside, div.row (from layout)
CSS fluid sizing	Let boxes and images shrink instead of overflow	max-width, %, height: auto
CSS adaptation	Change columns and spacing at breakpoints	media queries, flex/grid tweaks (CSS courses)
Avoid	Huge fixed pixels and layout tables fighting narrow screens	width="1200", whole-page table chrome

viewport meta——关键 HTML 片段

没有它，许多手机会缩小桌面画布，文字显得极小。

Viewport meta in head

html

HTML Code

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive demo</title>
</head>

读 viewport 行

name=viewport 是开关
width=device-width 对齐设备宽度
initial-scale=1.0 为 100%
仍需要 CSS

流式图片——HTML 标记 + CSS 缩放

img 与 alt；缩放靠 CSS。

Fluid images helper

html

HTML Code

<style>
img { max-width: 100%; height: auto; }
</style>
<img src="images/wide.jpg" alt="Wide landscape photo">

读流式规则

max-width:100%
height:auto 保持比例
width=1200 在手机上会溢出

HTML 解锁；CSS 收尾

viewport 与灵活结构属 HTML。流式栏与断点属 CSS。

练习——缩放实验室

添加 viewport
宽图 + 流式 CSS
收窄窗口
临时试 width=1200

易错点

忘记 viewport
固定 1200px 媒体
以为只要 HTML
整页布局表格

小结

viewport 必不可少
流式图片有帮助
HTML + CSS
下一课：表单

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

仔细阅读每个问题
为每个问题选择最佳答案
您可以随时重新参加测验
您的进度将显示在顶部

语言