直接用 flexbox + media queries 搭响应式网站更快、更可控，初学阶段应避免套用 Bootstrap 或 Tailwind 以深入理解流式布局与断点逻辑；推荐移动优先、单主断点（768px）、语义化 HTML 和关键 flex 组合（flex-direction/column→row、flex:1、flex-wrap+flex-basis），配合 picture/srcset、clamp() 和 rem/vw 单位防卡顿与撕裂。
直接用 flexbox + media queries 搭响应式网站，比套框架更快、更可控，也更容易定位布局问题。
为什么不用 Bootstrap 或 Tailwind 从零起步？
初学阶段套现成框架，容易掩盖对流式布局、视口断点、元素重排逻辑的理解断层。比如你改了 col-6 却不知道它背后是 flex: 0 0 50%，遇到自定义间距或嵌套错位时就只能查文档猜——而实际项目里，80% 的响应式问题出在父容器没设 display: flex 或忘了加 flex-wrap: wrap。
建议步骤：
- 先写一个无样式的 HTML 结构，确保语义正确（
header、main、aside等） - 只加两层 CSS：基础流式宽度（如
max-width: 1200px+margin: 0 auto）和一套@media (max-width: 768px) - 所有栅格行为用
display: flex控制，不用任何预设类名
移动端优先的 @media 断点怎么设才不翻车？
别一上来就写 @media (max-width: 480px) 和 @media (min-width: 1200px) 两头堵。真实设备有折叠屏、iPad Pro 横屏、Chrome DevTools 的「responsive」模式模拟失真等问题，硬写像素值反而难维护。
推荐策略：
- 只设一个主断点：
@media (max-width: 768px)（覆盖手机竖屏到小平板） - 所有宽屏样式写在默认 CSS 中（即“移动优先”），让大屏自然继承
- 若需适配 iPad 横屏等场景，再加
@media (min-width: 1024px) and (orientation: landscape)，但先确认设计稿真有这个需求 - 务必在
加，否则max-width在 iOS Safari 下会失效
flexbox 布局中哪些属性组合最常用又最易错？
响应式里真正高频的是三组搭配，不是全记 flex 所有子属性：
-
flex-direction: column（移动端单列） → 切换为flex-direction: row（桌面端横排），注意父容器高度是否被子项撑开 -
flex: 1（等分剩余空间）→ 在flex-direction: row下让多个子项均分宽度；但在column下它控制的是高度，容易误判 -
flex-wrap: wrap+flex-basis: 300px（替代传统栅格的col-4）→ 实际效果比百分比更稳定，尤其内容长度不一时
典型错误：flex: 1 写在子项上却忘了给父项加 display: flex，浏览器直接忽略；或者用了 flex-wrap: wrap 却没限制子项最小宽度，导致小屏下强行挤成一行溢出。
图片和字体怎么响应得“不卡顿”？
响应式网站卡顿，90% 出在资源加载而非 CSS 逻辑。关键不是“怎么写”，而是“怎么防”：
- 图片一律用
srcset，至少提供1x和2x两版，避免 Retina 屏拉伸模糊 - 字体用
font-size: clamp(1rem, 4vw, 1.5rem)替代多层@media，减少重排次数（注意 Safari 14+ 才完全支持clamp()） - 禁用
width: 100%+height: auto的图片——它会让浏览器先按原始尺寸渲染再缩放，造成 layout shift；改用max-width: 100%+height: auto
最常被跳过的细节：CSS 中所有涉及尺寸的值（padding、margin、font-size）尽量用 rem 或 vw，别混用 px，否则缩放时会出现“部分动、部分不动”的撕裂感。
