如何在 CSS 中处理不同的屏幕分辨率？答案

【问题标题】：How to deal with different screen resolutions in CSS?如何在 CSS 中处理不同的屏幕分辨率？
【发布时间】：2011-01-26 09:19:51
【问题描述】：

我是 UI 设计的新手，想知道在定位各种 HTML 元素时，处理不同屏幕分辨率的最佳方法是什么？我认为使用 %ages 会是前进的方向，但事实证明并非如此！

【问题讨论】：

【解决方案1】：

您对@media 查询最感兴趣，尤其是max-width 和min-device-width

【讨论】：

【解决方案2】：

您应该看看流式布局。这处理基于用户浏览器大小的扩展或收缩网页 -

【讨论】：

“屏幕分辨率”这个词不是更接近每英寸像素吗？您解决的问题可能被称为“屏幕尺寸”？
这些链接很好，但对于 2018 年搜索的人来说有点过时了——从 2003 年到 2004 年。目前的解决方案是使用经过良好测试的框架，如 Bootstrap、Material Design 或现代像 flexbox（可以水平翻转轴以反转，例如，在某些屏幕尺寸下）、CSS 网格以及使用 rems、vh、vw、vmin、vmax...等技术。

【解决方案3】：

% 是正确的方法。如果您开始使用 Javascript 来检测分辨率并根据您的代码将很快变成美味的肉意大利面来调整设计。

过去，我总是被告知以 800x600 的最低分辨率进行设计，但现在我总是以 1024x768 作为最低分辨率。

如果没有更多关于设计的细节，恐怕我们真的无法提供更多帮助！

【讨论】：

【解决方案4】：

检查 960grid，它是一种布局标准，可被最常见的屏幕分辨率整除。

【讨论】：

【解决方案5】：

首先看看这是否适合你。用这个替换你的标签

现在，如果有，则执行此 onload。这将减少 100% 的头痛，并且可以快速破解具有 1366 x 768 屏幕的笔记本电脑，而不会损坏更新、更大和更好屏幕的外观和感觉

var screenHeight = screen.height;
if (screenHeight < 800) {
  $('body').css('zoom', 0.8);
} else {
     $('body').css('zoom', 1);
}

【讨论】：