我的网站中有许多媒体查询可以调整平板电脑/智能手机上各种元素的大小。我刚刚添加了另一个媒体查询来调整低分辨率笔记本电脑上相同元素的大小，发现 Firefox 和 Chrome 似乎忽略了我对背景大小的使用。
媒体查询正在运行，其中部分正在被拾取，但不是背景大小。它在 Safari 中运行良好。
有什么想法吗？
我的 CSS 是：
@media only screen and (min-height: 768px) and (max-height: 800px) {
#title-we-are {
background-size:95%;
background: url(../img/title_we_are.png) bottom center no-repeat;
height:254px;
}
}
【问题讨论】：
标签： css media-queries
你的background-size 放在你的background 速记之前，所以the shorthand overrides it with its default value (auto)，防止你之前的background-size 声明生效。这是一个使用速记属性的common gotcha。
如果这在 Safari 中有效，则很可能 Safari 尚未更新其 background 速记以识别 background-size 值，从而允许您的 background-size 工作。
您需要切换它们，这样您设置的background-size 值才能生效：
@media only screen and (min-height: 768px) and (max-height: 800px) {
#title-we-are {
background: url(../img/title_we_are.png) bottom center no-repeat;
background-size:95%;
height:254px;
}
}
【讨论】：
附加信息：我已经确定在 chrome 中使用“background-image: url()”，background-size 不起作用。
只有在使用“background: url()”速记时，background-size 才有效。
从 Chrome 56.0.2924.87（64 位）开始就是这样
【讨论】：
.. 因为它们有另一种 css 格式：
-webkit-background-size: cover; //safari chrome
-moz-background-size: cover; // firefox
-o-background-size: cover; // opera
【讨论】：