如何用CSS实现网站内容适配所有PC分辨率

问题描述 #

我在网站适配中遇到问题：笔记本及部分PC上网站显示完美，无需滚动即可查看全部内容，但在部分PC分辨率下出现放大效果，需滚动才能查看完整内容。已将html和body设置为height、width: auto，部分字体使用rem单位，相关CSS代码如下：

:root{
    --project_bg_color1 : #D81F26;
    --project_bg_color2 : #EEB51E;
    --text_colours : white; /* Also used for container background color */
    --btn_colours_1 : #D65421;
    --btn_colours_2 : #EDB41E;
    --bg_colors_elements : transparent; /* background transparent for buttons , containers , border elements etc... */
    --container_border_color : #e5765b;
    --black_text_color : #2D2D2D;
    --big_font_sizes : 1.2rem; /* Used in Headers , Tables and stake pages */
    --medium_font_sizes : 1rem; /* Used for contents */
    --medium_font_sizes_2 : 0.8rem;
    --font_family : Inter, -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, noto sans, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--font_family);
    line-height: 1.5;
    overflow: scroll;
    overflow-x: hidden;
    height: auto !important;
    width: auto !important;
}
::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: var(--bg_colors_elements);  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: var(--project_bg_color1);
}
body {
    background: url("../media/shapes.png") , linear-gradient(-0.7turn,var(--project_bg_color1), var(--project_bg_color2)) no-repeat center center fixed;
    margin: 0;
    padding: 0;
    height: auto !important;
    width: auto !important;
}
main {
    display: block;
}

核心问题分析 #

问题根源在于缺乏视口适配配置和内容容器无响应式限制：虽然使用了rem单位，但未设置基准字体大小，且html/body的尺寸、溢出规则不合理，导致部分分辨率下浏览器自动缩放内容。

具体修复步骤 #

1. 添加视口元标签（HTML头部） #

在HTML的<head>中加入视口标签，强制浏览器按设备实际宽度渲染，禁止默认缩放：

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

2. 修正html/body的尺寸与溢出设置 #

移除强制滚动规则，确保根元素占满视口且背景适配：

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--font_family);
    line-height: 1.5;
    overflow-x: hidden;
    height: 100%; /* 占满视口高度 */
    width: 100%;
    font-size: 16px; /* 设置rem基准值，1rem=16px */
}

body {
    background: url("../media/shapes.png") , linear-gradient(-0.7turn,var(--project_bg_color1), var(--project_bg_color2)) no-repeat center center fixed;
    background-size: cover; /* 背景图适配视口 */
    margin: 0;
    padding: 0;
    min-height: 100vh; /* 确保至少占满视口高度 */
    width: 100%;
}

3. 为核心内容容器添加响应式限制 #

限制内容最大宽度并居中，避免大分辨率下过度拉伸：

main {
    display: block;
    max-width: 1200px; /* 根据设计需求调整最大宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: 0 20px; /* 小屏幕左右留白 */
    box-sizing: border-box;
}

4. 适配不同分辨率的基准字体 #

通过媒体查询调整小屏幕下的rem基准值：

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

5. 排查硬编码尺寸元素 #

检查页面中是否存在width: 1920px这类固定尺寸元素，替换为百分比、max-width或媒体查询适配。

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