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

Question

有几种不同的显示器类型，因此网页需要与许多不同的屏幕分辨率兼容。我们现在使用4K显示器，但大多数背景图像仍然是“仅”HD。但这不是我面临的唯一问题。最重要的是，您如何使用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为您提供有关此屏幕和其他定位不同屏幕的方法的更多详细信息。