HTML响应式开发需用外部CSS文件+viewport声明，配合移动优先的媒体查询、vw/vh/clamp()单位，以及touch-action、IntersectionObserver等性能优化手段。
HTML 里怎么写内联样式或引入 CSS
直接在 标签里写 CSS，或者用 style 属性加内联样式，是最简单的起步方式。但真要适配手机端，光靠这些远远不够——它们没响应能力，也不管屏幕宽窄。
实际项目中必须用外部 CSS 文件 + 引入，并确保 HTML 有正确的视口声明：
漏掉这行，max-width、rem、媒体查询全会失效，手机上页面照样被缩成一团。
手机端必须用媒体查询（@media）控制布局
不写 @media，就等于没做响应式。关键不是“写了就行”，而是得按真实设备断点来组织规则：
立即学习“前端免费学习笔记（深入）”；
-
@media (max-width: 768px)覆盖平板竖屏及以下，别只盯 iPhone 宽度 - 优先用
min-width实现移动优先（mobile-first），比如先写基础样式，再用@media (min-width: 769px)加桌面增强 - 避免嵌套过深的媒体查询，CSS 顺序会影响覆盖结果；后写的同级规则会覆盖前面的
- 慎用
device-width—— 它依赖设备物理像素，iOS Safari 和部分安卓浏览器行为不一致，一律用width（视口宽度）
rem/vw/vh 单位选哪个？别硬套模板
rem 需配合 JS 动态改 html 根字体大小才能适配不同屏幕，但现代项目更倾向用 vw 做字体和间距：1vw = 视口宽度的 1%，简单直接。
不过要注意：
-
16vw在小屏上可能太大，建议上限加max-font-size或用clamp()，例如：font-size: clamp(14px, 4vw, 18px); -
vh在 iOS Safari 中有坑：地址栏收放会导致视口高度突变，100vh可能显示不全，稳妥做法是用min-height: 100%+flex布局撑满 - 纯百分比（
%）适合容器宽度，但文字、边距别全靠它，容易在超小屏上挤成一团
触摸交互和渲染性能容易被忽略
手机端不是“缩小版桌面”，点击区域、滚动行为、重绘成本都不同：
-
touch-action: manipulation能减少 iOS 上 300ms 点击延迟，加在按钮、链接等可点击元素上 - 避免在滚动容器里监听
scroll事件做重计算，改用IntersectionObserver或passive: true -
will-change: transform对动画元素提前提示浏览器优化，但别滥用，否则反而触发多余图层合成 - 图片必须带
srcset和sizes，否则手机下加载桌面大图，又慢又费流量
真正卡顿的点，往往不在媒体查询写没写，而在 touch 事件绑定方式、图片是否懒加载、CSS 动画有没有触发硬件加速这些细节里。
