将响应式布局改为固定宽度布局的核心是删除所有流式相关css并锁定容器宽度：删掉viewport缩放控制、清除百分比/相对单位、移除媒体查询、覆盖框架容器断点、重置图片iframe的max-width。
直接把响应式布局改成固定宽度布局，核心就一条：删掉所有影响流式行为的 CSS，再锁死容器宽度。不是加个 width: 1200px 就完事，漏掉关键点反而会让页面在桌面端也错乱。
删掉 viewport meta 标签里的缩放控制
响应式布局依赖 <meta name="viewport" content="width=device-width, initial-scale=1"> 来适配不同屏幕。改成固定布局后，这个标签会让小屏强行拉伸显示，内容被压缩变形。必须删掉或改成静态值：
<meta name="viewport" content="width=1200">
注意：width=1200 是像素值，不是关键词；如果保留 initial-scale=1 但不改 width，iOS Safari 仍会按设备宽度渲染，固定布局就失效了。
清除 max-width / width 百分比和 rem/em 相对单位
响应式常用 max-width: 100%、width: 90%、font-size: 1.2rem 这类声明，它们会随父容器或根字体缩放。固定布局要全部替换为绝对单位：
立即学习“前端免费学习笔记（深入）”；
