如何兼容HTML/CSS中的不同分辨率？

Question

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

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.

针对不同屏幕的其他方法的更多详细信息

如何兼容HTML/CSS中的不同分辨率？

How to be compatible with different resolutions in HTML / CSS?

html

css

compatibility

background

resolution