HTML移动端移动优先布局的开发教程-html教程-PHP中文网

移动端适配失败主因是viewport设置错误和未践行移动优先：必须用width=device-width+initial-scale=1.0，CSS从320px基础样式写起，用rem、flex和picture等技术实现渐进式响应式。

html移动端移动优先布局的开发教程

移动端页面一打开就文字小、布局溢出、横向滚动条卡住——根本不是 CSS 写得不够多，而是没走对移动优先的起点：viewport 没写对，基础样式没从 320px 开始写起。

漏写、写成 width=320 或加了 maximum-scale=1.0，都会让 iOS 和安卓高 DPI 屏直接“失焦”：文字模糊、按钮点不中、整个布局被压缩成窄条。

width=device-width 是核心——它把 CSS 像素宽度设为设备逻辑宽度（比如 iPhone 14 是 390px），不是物理像素，也不是固定值
initial-scale=1.0 必须配对出现，否则 Safari 会默认缩放，触发字体重排
user-scalable=no 仅在 Web App 场景下考虑启用；普通网页禁用，否则违反 WCAG 可访问性要求
别用 minimum-scale/maximum-scale 组合：部分安卓浏览器会破坏双指缩放，iOS 下还可能让 input 聚焦时页面跳动

所谓“移动优先”，就是所有默认样式都按最小视口（320px）设计。你看到的每一条规则，只要没被 @media (min-width: ...) 覆盖，就天然适配手机。

删掉所有固定 width: 1200px、margin-left: 200px 这类桌面惯用写法
.container 默认设为 width: 100% 或 max-width: 100vw，配合 padding: 1rem 替代像素边距
字体大小统一用 rem：html { font-size: 16px; } 是起点，再用 JS 动态调整（如根据 document.documentElement.clientWidth 缩放）
避免 border-radius: 2px 这种写死像素值——在 3x 屏上几乎不可见，改用 0.125rem 或加 @media (-webkit-min-device-pixel-ratio: 3) 特殊处理

移动端默认竖排，宽屏才横排——这不是靠 JS 切换 class，而是靠 @media 控制 display: flex 的方向和换行行为。

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

基础样式保持 display: block 或不设布局，让子元素自然流式堆叠
在 @media (min-width: 768px) 中启用 display: flex，并设 flex-direction: row 和 flex-wrap: wrap
用 flex-basis 控制单个模块宽度，比如 .time-block { flex: 0 0 calc(50% - 1rem); }，比 float 或 grid 更轻量、兼容性更好
慎用 grid-template-columns: repeat(4, 1fr)：在小屏下会强制撑开导致横向滚动，除非套在 @media 里

响应式不只是布局变宽变窄，更是资源加载和操作反馈的分层控制。

图片必须用 + srcset：
按钮点击延迟不是靠换 touchstart 解决，而是加 touch-action: manipulation 和 cursor: pointer
真要用触摸事件，监听 touchend 而非 touchstart；若用了 touchstart，必须 event.preventDefault() 并补 role="button"，否则屏幕阅读器无法识别
禁止在可滚动容器里监听 touchmove 并 preventDefault()——这等于亲手关掉原生滚动，iOS 上尤其明显