CSS 响应式媒体查询在 Google Chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24345046/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive media query not working in Google Chrome
提问by ividyon
I have written a piece of CSS code to fluidly switch my site layout's width based on the user's screen width. If the user has less screen estate available, the layout's width increases to fill more of the window and leave less whitespace, and if they have more space, the layout shrinks to maintain an appealing look.
我已经编写了一段 CSS 代码来根据用户的屏幕宽度流畅地切换我的站点布局的宽度。如果用户可用的屏幕空间较少，布局的宽度会增加以填充更多的窗口并留下更少的空白，如果他们有更多的空间，布局会缩小以保持吸引人的外观。
I use the following code to achieve this:
我使用以下代码来实现这一点：
#bg{
background:-webkit-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:-moz-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:-o-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
margin-left:auto;
margin-right:auto;
margin-bottom:1.6rem;
border-width:0 0.1rem 0.1rem 0.1rem;
border-style:solid;
border-color:#303030 #101010 #000;
border-radius:0.8rem;
min-width:94.2rem
}
@media (min-width: 70rem){
#bg{
border-radius:4px;
border-radius:0.4rem;
width:90%
}
}
@media (min-width: 91rem){
#bg{
width:80%
}
}
@media (min-width: 112rem){
#bg{
width:70%
}
}
This works just fine in Firefox 30, however Google Chrome alwaysdisplays the element at 70% width.
这在 Firefox 30 中工作得很好，但是 Google Chrome总是以 70% 的宽度显示元素。
Previously, I had also used max-widthin the queries, in which case Chrome would do the inverse thing; it would always display the element at 90%, no matter how much I resize the browser window.
以前，我还在查询中使用了max-width，在这种情况下 Chrome 会做相反的事情；无论我如何调整浏览器窗口的大小，它都会始终以 90% 的比例显示元素。
The rules are compiled using SASS. What exactly is the problem here? How can I alter the query to work in all browsers?
这些规则是使用 SASS 编译的。这里究竟有什么问题？如何更改查询以在所有浏览器中工作？
The affected website can be found at this link.
可以在此链接中找到受影响的网站。
回答by Hassan Raza
add this line in <head>
添加这一行 <head>
<meta name="viewport" content="width=device-width,initial-scale=1">
回答by ralph.m
See if this more usual syntax works better:
看看这个更常用的语法是否更好用：
@media screen and (min-width: 112rem){ ... }
回答by Nikit Barochiya
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background:green;
}
@media only screen and (max-width: 500px) {
body{
background:yellow;
}
}
</style>
</head>
<body>
</body>
</html>
回答by Baked Inhalf
You can tweak this to your needs
您可以根据自己的需要进行调整
// css for mobile here
// ...
/* desktop */
@media (min-width: 900px) and (orientation: landscape)
{
// css for desktop here
// ...
}
And don't forget
并且不要忘记
<meta name="viewport" content="width=device-width, initial-scale=1">
回答by bywronski
If you're using Chrome (or any browser) on a desktop, the browser zoom should be 100%. No more or no less. Otherwise, responsive doesn't work(use Ctrl + scroll in Windows, or Cmd +/- in Macto adjust).
如果您在桌面上使用 Chrome（或任何浏览器），则浏览器缩放比例应为 100%。不多也不少。否则，响应不起作用（在Windows 中使用 Ctrl + scroll或在Mac 中使用Cmd +/-进行调整）。
回答by Aadol Rrashid
please close your code with ';' and try this
请用';'关闭您的代码 试试这个
@media (min-width: 70rem){
#bg{
border-radius:4px !important;
border-radius:0.4rem !important;
width:90% !important;
}
回答by karthick nagarajan
All are correct, but Chech this
都是正确的，但检查这个
@media only screen and (min-width : 320px) {...}
NOT
不是
@media screen and (min-width: 320px){ ... }
@media screen and (min-width: 320px){ ... }
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
