HTML响应式模板怎么用？新手入门操作步骤-html教程-PHP中文网

viewport标签必须放在最开头且唯一，content值仅限width=device-width, initial-scale=1.0；位置错误、动态插入、多标签或额外参数均导致失效，引发缩放异常、横向滚动及300ms点击延迟。

html响应式模板怎么用？新手入门操作步骤

viewport 标签没加对，其他全白搭

所有响应式行为的前提是浏览器知道“该怎么缩放”。必须放在最开头，不能动态插入、不能重复写、不能写成 width=375 这类固定值。

常见翻车现场：

用 JS 在 DOMContentLoaded 后补写——iOS Safari 直接无视
框架（如 Vue SSR）漏掉这行，首屏渲染已按 980px 宽度执行
加了 user-scalable=no——既锁不住缩放，又违反可访问性要求

移动端优先写 CSS，别从桌面倒推

先写窄屏样式（比如默认不设断点），再用 @media (min-width: 768px) 往上加规则。这样逻辑清晰，覆盖少，也不容易漏重置。

例如，侧边栏默认上下堆叠，只在宽屏才改成左右并排：

.sidebar, .main-content { width: 100%; }
@media (min-width: 768px) {
  .container { display: flex; }
  .sidebar { width: 30%; }
  .main-content { width: 70%; }
}

如果反过来用 max-width，很容易忘了在大屏下把 display: none 改回来，结果整个模块消失。

图片不能只靠 `width: 100%`

img { max-width: 100%; height: auto; } 只解决“不撑破容器”，但小屏仍会下载桌面尺寸的图，浪费流量、拖慢首屏。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

真正响应式得让浏览器自己选源：

用 srcset 提供多尺寸图源：
配 sizes 告诉浏览器各断点下图片占多少视口宽度：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
别指望所有邮箱客户端支持——HTML 邮件里还得退回 width + 表格布局

rem 基准别硬写媒体查询

用 @media (max-width: 767px) { html { font-size: 14px; } } 这种写法，在 iPad Pro（逻辑宽度 1024px）、折叠屏展开态（1200px 仍需移动体验）上基本失效。

更靠谱的是 JS 动态算：

function setRem() {
  const baseWidth = 375;
  const scale = document.documentElement.clientWidth / baseWidth;
  document.documentElement.style.fontSize = scale * 16 + 'px';
}
setRem();
window.addEventListener('resize', setRem);
window.addEventListener('orientationchange', setRem);

注意两个坑：