Question

我正在努力使三种背景图像适应不同的分辨率（1920 x 1080的移动设备，平板电脑和电脑屏幕）。我该怎么办？enter link description here

Answer 1

您希望在CSS文件中使用media-queries。您可以详细了解media-query的工作原理here，但以下CSS是您希望如何管理查询的一般指南。

/* Mobile screens */
@media (max-width: 400px) {
    #background-image{
        background-image: url('imageMobile.jpg');
    }
} 

/* Larger than phone. Tablet-sized. */
@media (min-width: 401px) {
    #background-image{
        background-image: url('imageTablet.jpg');
    }
}

/* Desktop-sized. */
@media (min-width: 920px) {
    #background-image{
        background-image: url('imageDesktop.jpg');
    }
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
    #background-image{
        background-image: url('imageHDDesktop.jpg');
    }
}

在CSS的其他地方 - 不在media-query中，您将定义容器元素的所有其他属性，然后media-queries将选择最适合其大小的background-image

修改：几年前，当引入media-queries时，人们过去只使用max-width。现在有一种更新的响应式设计方法，使用min-width代替，使用CSS的性质＆＃39; ＆＃39;级联＆＃39;应用然后覆盖每个连续的规则，直到最终查询是正确的。这样，较小的设备不必为大于自己屏幕的设备加载媒体查询，从而提升旧移动设备的性能。

CSS3背景图像适应不同的浏览器

1 个答案: