高分辨率下网页显示异常，如何使用media query实现适配？

第一步：确认viewport配置正确 #

配置不生效大概率是属性写漏了，正确的viewport代码必须放在HTML的<head>标签内：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

核心作用是让网页布局宽度和设备物理屏幕宽度对齐，避免浏览器自动缩放网页，width=device-width是必须配置的属性，漏写会直接导致配置失效

第二步：优先替换固定像素单位 #

你在1366x768分辨率下用固定px写的元素尺寸，放到1920分辨率下要么尺寸太小、要么页面留白过多，这是适配出问题的核心原因，优先修改单位能解决80%的适配问题：

• 布局尺寸优先用%、vw、vh相对单位：1vw等于屏幕宽度的1%，1vh等于屏幕高度的1%
• 字体大小用rem，配合根元素字体自适应配置，示例代码：

/* 根元素字体大小按屏幕宽度自动换算，1366屏时1rem=16px，1920屏时1rem≈22.5px */
html {
  font-size: calc(100vw / 85.375);
}
/* 限制最小/最大字体尺寸，避免过小或过大 */
@media screen and (max-width: 1366px) {
  html {
    font-size: 16px;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 22.5px;
  }
}

第三步：Media Query 具体实现示例 #

如果修改单位后还有特殊布局需要单独调整，可以用媒体查询针对不同分辨率写专属样式覆盖默认样式，示例代码如下：

/* 默认样式：针对你开发用的1366x768分辨率编写 */
.container {
  width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.item {
  width: 280px;
  margin-right: 20px;
  float: left;
}

/* 针对1920x1080及以上分辨率的专属样式 */
@media screen and (min-width: 1920px) {
  .container {
    width: 1600px; /* 放大版心宽度适配大屏 */
  }
  .item {
    width: 370px; /* 放大元素尺寸 */
    margin-right: 30px;
  }
}

/* 如需适配更小屏幕，可额外增加断点 */
@media screen and (max-width: 1200px) {
  .container {
    width: 95%;
  }
  .item {
    width: 30%;
    margin-right: 3%;
  }
}

常用分辨率断点参考：1200px（普通办公笔记本）、1366px（主流小屏）、1600px、1920px（主流大屏）、2560px（2K屏）

临时快速解决方案 #

如果是老项目改造成本高，可以直接加全局缩放样式临时适配：

@media screen and (min-width: 1920px) {
  body {
    transform: scale(1.4); /* 1920/1366≈1.4，按比例缩放整个页面 */
    transform-origin: 0 0;
    width: 100vw;
    overflow-x: hidden;
  }
}

内容的提问来源于stack exchange，提问作者TMB17