如何用CSS适配手机、平板和桌面屏幕？-css教程-PHP中文网

结论：用@media断点+viewport元标签+box-sizing:border-box三件套覆盖多数适配需求；viewport标签必须写在head中且不可禁缩放；断点应按内容崩坏点而非固定数值设置；优先用flex/grid+clamp()实现弹性布局；真机测试前需关闭chrome模拟设备缩放并实测横竖屏。

如何用css适配手机、平板和桌面屏幕？

直接说结论：用 @media 写断点 + viewport 元标签 + box-sizing: border-box 三件套，就能覆盖绝大多数适配需求。别一上来就抄 Bootstrap 断点，先看内容在哪撑不住、再设断点。

viewport 标签漏写，手机上所有 CSS 都白调

这是最常被跳过的一步——没有它，@media 在手机浏览器里基本失效。

必须在里加：<meta name="viewport" content="width=device-width, initial-scale=1">
别写 user-scalable=no，会惹恼用户；也别写 maximum-scale=1.0，影响可访问性
如果页面在 iPhone 上“又扁又糊”，第一反应不是查 CSS，而是打开源码看有没有这行 <meta>

断点别背数值，按内容崩坏点来设

768px、1024px 这些数字只是参考，真正该关心的是：文字挤成一团？按钮叠在一起？图片被裁掉一半？那个位置才是你的断点。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

手机默认样式（移动优先）：用 @media (min-width: 768px) 开始适配平板，不是 max-width
桌面断点建议从 1200px 起，而不是硬套 1024px —— 现在主流笔记本最小宽度已是 1280px
避免嵌套太多 @media：写 5 个以上断点时，浏览器渲染开销明显上升，优先合并逻辑相近的规则

flex/grid + clamp() 比纯 width 百分比更稳

只靠 width: 100% 或 max-width 容易在小屏上留白过多、大屏上撑不满，用现代布局+弹性字号更可控。

导航栏用 display: flex + flex-wrap: wrap，再配合 @media (max-width: 600px) { flex-direction: column; }
标题字号推荐 font-size: clamp(1.25rem, 4vw, 2.25rem); —— 最小 20px，最大 36px，中间随视口平滑变化
图片墙用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，比浮动或 inline-block 更少出 bug

真机测试前，先关掉 Chrome 的“模拟设备”缩放

开发者工具 Device Mode 默认开启“缩放以适配窗口”，这会让 1px 边框、0.5rem 间距严重失真，测出来根本不是真实效果。

真机扫码调试前，先在 Chrome DevTools 里点右上角 ⋯ → “Rendering” → 关掉 Emulate mobile viewport scaling
横竖屏切换必须实测：很多页面在 @media (orientation: landscape) 下没写样式，横着拿手机就乱套
iOS Safari 对 vh 的处理和 Chrome 不同（地址栏收起/展开会影响高度），关键区域慎用 height: 100vh

真正难的不是写多少断点，而是判断哪块内容在哪个尺寸下开始“不自然”——字体太小看不清？按钮太密按不准？留白突然变大？这些才是断点该出现的地方。写完别急着交，拿三台不同型号的手机横竖各试一遍，比对着 F12 猜靠谱得多。