html - 如何正确使用媒体查询根据显示宽度更改样式？

Question

我有一种风格，我想在移动设备上有所不同。样式在包含很多样式的样式表中。

样式是这样的:

.header_wrapper{
     background-image:bla bla bla;
}

我希望上述样式在宽度小于 480 像素的移动设备上显示时没有背景图像？ (只是猜测宽度，但请随意建议一个合适的宽度):

.header_wrapper{
     background-image:none;
}

是否可以通过一个样式表完成所有这些工作？或者我是否需要复制整个样式表(有很多样式)只是为了更改一种样式，然后将样式表添加到网站？

优先顺序如何？

Answer 1

可以使用媒体查询从一个样式表完成这一切。

CSS 应该是这样的:

@media screen and (max-device-width: 480px) {
    .header_wrapper{
         background-image:none;
    }
}

这应该放在样式表的末尾，以确保它覆盖以前的样式。

如果要覆盖许多样式，您还可以使用媒体查询链接到单独的样式表。

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" />