如何在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');
}
}

还要看看这些文档，它们非常全面且易于理解。他们将为您提供有关此方法以及使用css定位不同屏幕的其他方法的更多详细信息。