移动端响应式核心是：容器设 max-width:100% + width:100%，图片设 max-width:100%; height:auto；用 min-width 媒体查询渐进增强；viewport 只需 width=device-width, initial-scale=1；flexbox 避免固定像素 flex-basis，优先用百分比或 auto。
用 max-width + width: 100% 控制图片和容器不溢出屏幕
移动端图片撑破容器是最常见问题，根源是默认 img 不会自动缩放。只设 width: 100% 不够——如果父容器没限制最大宽度，它仍可能超出视口。
正确做法是给所有响应式容器加 max-width: 100%，再配 width: 100%；图片统一加：
img {
max-width: 100%;
height: auto;
}
注意：不要用 width: 100vw 替代，它会强制铺满整个视口宽度（含滚动条区域），在 iOS Safari 下容易导致横向滚动条意外出现。
媒体查询中优先用 min-width 而非 max-width
移动端优先的写法更易维护。基础样式写默认（小屏），再用 @media (min-width: 768px) 逐步增强。反向写 max-width 容易漏掉中间断点，且 CSS 层叠逻辑变复杂。
立即学习“前端免费学习笔记（深入）”；
典型断点建议（按设备实际 viewport 划分，不是按“手机/平板/桌面”模糊分类）：
-
@media (min-width: 480px)：窄屏手机横屏或小平板竖屏 -
@media (min-width: 768px)：iPad 竖屏起，主流平板最小宽度 -
@media (min-width: 1024px)：桌面端起步，避开高像素比手机误判
别硬套“Bootstrap 四级断点”，很多项目根本用不到 xl 或 xxl。
闪灵CMS企业建站系统是淄博闪灵网络科技有限公司开发的一款专门为企业建站提供解决方案的产品，前端模板样式主打HTML5模板，以动画效果好、页面流畅、响应式布局为特色，程序主体采用PHP+MYSQL构架，拥有独立自主开发的一整套函数、标签系统，具有极强的可扩展性，设计师可以非常简单的开发出漂亮实用的模板。系统自2015年发布第一个版本以来，至今已积累上万用户群，为上万企业提供最优质的建站方案。
viewport meta 标签必须带 width=device-width，但慎用 user-scalable=no
没有这行，iOS 和 Android Chrome 都会把页面当桌面站渲染，文字极小、布局错乱：
<meta name="viewport" content="width=device-width, initial-scale=1">
加 user-scalable=no 看似能防用户双指缩放，但实际带来三个问题：
真正需要锁定缩放的场景极少，绝大多数情况只保留 width=device-width, initial-scale=1 即可。
Flexbox 布局中避免对 flex-basis 写死像素值
比如 flex: 0 0 300px 在小屏下必然溢出。响应式 Flex 布局的关键是让子项能收缩：
- 用
flex: 1让项目均分剩余空间 - 用
flex: 0 1 auto允许收缩但不强制拉伸 - 真要设基准宽度，改用
flex-basis: 50%或flex-basis: min-content
配合 flex-wrap: wrap，比强行用 float 或 grid 更轻量、兼容性更好（IE11 也支持）。
响应式不是堆砌断点，而是从内容流出发，先保证小屏可读可用，再逐层叠加布局变化。最常被忽略的是字体大小和点击区域——14px 文字在 3x 屏上几乎不可读，24px 的按钮在手指操作时太小，这些细节比栅格系统更重要。
