如何兼容 HTML/CSS 中的不同分辨率？ [复制]

Question

有几种不同的显示器类型，因此网页需要兼容许多不同的屏幕分辨率。我们现在使用 4K 显示器，但大多数背景图像仍然是“仅”高清。但这不是我面临的唯一问题。最重要的是，你怎么知道当前使用的显示器的分辨率是多少，使用HTML还是CSS？如果我为我的页面设置了高清背景，并且有人使用 4K 显示器打开我的网站，他/她将看到我的背景底部，因此背景图像下方的网页空白部分，这不是很好。这个问题有哪些可能的解决方案？

Answer 1

我认为您正在寻找的内容可以通过 css 和媒体查询来实现。这基本上允许您为不同的屏幕分辨率设置 html 样式。语法也很容易理解。

其中一种方法是在您的 css 文件中使用这些媒体查询。下面是一个例子。

/*This is for all screen types as you would guess*/
body{
    background-image: url('img/large-background.jgp');

/*This will target screens with max width of 768px i.e. tablets*/
@media (max-width: 768px) {
    body {
        background: url('img/less-large-background-for-devices.jpg');
    }
}

也可以看看these docs，很全面，很容易理解。他们将为您提供有关此方法以及使用 css 定位不同屏幕的其他方法的更多详细信息。