纯PC端页面必须加，否则Chrome 80+等现代浏览器在高DPI屏上会强制缩放，导致像素失准、布局错位；禁用user-scalable=no以保障可访问性。
直接给结论：纯 PC 端样式不需要 @media 响应式断点，但必须加 <meta name="viewport">，否则现代浏览器（尤其是 Chrome 80+ 和 Edge）会强制缩放，导致像素计算失准、布局错位。
为什么 PC 页面也要写 viewport meta 标签
很多人以为 <meta name="viewport"> 只是给手机用的。错。从 Chrome 80 开始，桌面版浏览器在高 DPI 屏幕（如 2K/4K 显示器、Mac Retina）上默认启用“缩放适配”，会把 1px 渲染成 1.25 或 2 个物理像素 —— 这直接破坏你写的固定宽度、边距、字体大小。
解决办法只有一条：<meta name="viewport" content="width=device-width, initial-scale=1">。注意两点：
-
width=device-width在桌面端实际等于 CSS 像素宽度（即 layout viewport 宽度），不是物理宽度 - 去掉
user-scalable=no—— PC 用户需要缩放，禁用反而影响可访问性
PC 专用布局的 CSS 写法要点
目标是让页面在 1366px ~ 3840px 主流分辨率下都保持结构稳定、文字清晰、间距合理，不拉伸、不压缩、不换行错乱。
立即学习“前端免费学习笔记（深入）”；
关键策略：
- 用
min-width+max-width控制容器宽度，比如max-width: 1440px防止超宽屏撑开内容 - 主容器用
margin: 0 auto居中，两侧留白自然适应不同分辨率 - 字体优先用
px（如font-size: 16px），避免em或rem在缩放时意外放大 - 避免
%宽度用于关键控件（如按钮、输入框），容易在 125% 缩放下溢出父容器
常见错误：误用响应式断点做 PC 适配
看到别人写 @media (max-width: 1024px) 就照搬？这在纯 PC 场景里大概率是反效果。
典型问题：
-
max-width: 1024px会命中很多 1366px 笔记本（系统缩放 125% 时 viewport 宽 ≈ 1093px），触发移动端样式 - 写了
@media screen and (min-width: 1920px)却没配max-width，导致 4K 屏下文字小得看不清 - 用
device-width而非width，在桌面浏览器里根本不会生效（device-width是设备硬件宽度，桌面端不可读）
真要区分 PC 分辨率，用 @media (min-width: 1200px) 起步即可，且只覆盖排版微调（如侧边栏显隐、行高增加），别动基础盒模型。
字体和间距在 PC 上的实际表现差异
16px 字体在 100% 缩放下清晰，在 125% 下变模糊？这不是 CSS 问题，是系统渲染机制。
应对方式：
- Windows 用户建议用
font-family: "Segoe UI", system-ui, sans-serif，比Helvetica或Arial更适配 ClearType - 行高统一设为
line-height: 1.5（无单位），避免px行高在缩放时卡顿 - 外边距/内边距慎用
em：如果父元素font-size被用户缩放修改，1em会跟着变，造成布局漂移
最稳妥的是全部用 px 或 rem（配合根字体固定：html { font-size: 16px; }），并禁用 text-size-adjust 防止 Safari 桌面版自动放大文本。
