兼容低分辨率优化布局和样式

低分辨率兼容方案

响应式设计

响应式设计可以通过 CSS 的媒体查询，根据不同的屏幕尺寸调整布局和样式。可以为不同的分辨率定义不同的样式

/* 针对1080p及以上的屏幕 */
@media (min-width: 1080px) {
    body {
        font-size: 16px;
    }
    /* 其他适用于1080p的样式 */
}

/* 针对768p屏幕 */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .container {
        width: 100%; /* 将容器设置为占满屏幕宽度 */
        padding: 10px;
    }
    /* 根据需要调整布局 */
}

通过媒体查询可以为不同屏幕宽度设置合适的字体大小、布局和图片尺寸。

弹性布局

使用 flexbox 或 grid 这样的弹性布局，可以让页面元素根据屏幕大小自适应布局。

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item {
    flex: 1 1 300px; /* 每个元素至少占据300px宽度，随屏幕变动 */
    margin: 10px;
}

相对单位

避免使用固定的 px，改用相对单位如百分比（%）、vw、vh、rem，这些单位可以根据屏幕大小自适应。

.container {
    width: 80%; /* 使用百分比代替固定宽度 */
    padding: 2rem; /* 使用 rem 相对字体大小 */
}

img {
    max-width: 100%; /* 图片宽度最大为父容器的100% */
    height: auto; /* 保持图片比例 */
}

视口元标签

这个标签会根据设备屏幕宽度调整页面的缩放和布局。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

调整图片和字体大小

在低分辨率的屏幕上，可以通过媒体查询来缩小图片和字体大小，以免内容溢出屏幕或变得难以阅读

@media (max-width: 768px) {
    img {
        width: 100%; /* 图片占满屏幕宽度 */
        height: auto; /* 保持比例 */
    }

    body {
        font-size: 14px; /* 字体适当缩小 */
    }
}