媒体查询本身不处理百分比，真正让布局伸缩的是百分比单位与正确HTML结构的配合；必须设置viewport meta标签，断点应依内容临界点而非设备尺寸设定，推荐min-width单向递增，容器需用max-width和margin:0 auto，图片加max-width:100%、字体用rem。
媒体查询本身不处理百分比，它只负责“在什么宽度下启用哪套样式”；真正让布局伸缩的是百分比单位 + 正确的 HTML 结构。两者必须配合，缺一不可。
为什么写了 @media 但页面在手机上还是挤成一团
最常见原因是没写或写错 <meta name="viewport">。iOS Safari 默认视口宽度是 980px，哪怕你写了 @media (max-width: 480px)，它根本不会触发——浏览器压根没把屏幕当“480px 宽”。
- 必须且只能用：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 禁用
maximum-scale=1.0：否则用户双击放大失效，违反 WCAG 可访问性要求 - 不要写
width=1200或user-scalable=no：前者锁死视口，后者剥夺用户控制权
@media 断点该按设备尺寸还是内容临界点设
按内容撑开后“开始难看”的那一刻定。比如两列卡片并排时，在 783px 宽度下刚好重叠——那就设 @media (max-width: 782px)，而不是硬套“768px 是平板”。
- 先写桌面端默认样式（不用
@media），再逐步缩小浏览器窗口观察 - 关注文字折行、图片裁切、按钮换行等视觉断裂点
- 推荐用
min-width单向递增：@media (min-width: 768px)比max-width更易维护，避免规则覆盖冲突 - 3–4 个断点足够：
480px、768px、1024px、1200px
百分比容器怎么写才不被父级拖垮
单纯写 width: 100% 很危险——如果父级是 display: flex 或有 padding，子元素可能溢出或撑不开。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 容器优先用：
width: 100%; max-width: 980px; margin: 0 auto; - 避免嵌套多层
width: 100%，尤其不要在float或position: absolute元素里用 - 浮动布局中，左右栏用
width: 30%+width: 70%可行，但必须加box-sizing: border-box，否则 padding 会撑破 - 更推荐直接用 Flexbox：
.container { display: flex; }+.left { flex: 0 0 30%; }，语义清晰且天然响应
图片和字体用百分比要注意什么
图片不能只靠 width: 100%，字体也不能靠 font-size: 16px 硬写。
- 图片必须加：
max-width: 100%; height: auto;—— 否则高宽固定会导致拉伸或裁切 - 禁用
height固定值，尤其是img标签 - 字体别用
px，改用rem：html { font-size: 16px; }，再在媒体查询里调：@media (max-width: 480px) { html { font-size: 14px; } } - 如果用了
em，注意它继承自父级 font-size，层级深时容易失控
真正的难点不在写多少条 @media，而在于默认样式是否足够弹性——结构语义化、单位相对化、图片可控化，这三样没做好，再多断点也只是打补丁。
