Html CSS 媒体查询在任何地方都不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18470350/
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
CSS media queries not working anywhere
提问by dll_onFire
I am trying to use different CSS Stylesheets for different layouts (as you have already guessed from the title) but unfortunately nothing is working.
我正在尝试为不同的布局使用不同的 CSS 样式表（正如您已经从标题中猜到的），但不幸的是没有任何效果。
I tried loading the CSS file
我尝试加载 CSS 文件
<link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" />
in the meta tag and I also tried using
在元标记中，我也尝试使用
@media (min-width: 401px) and (max-width: 800px) {
.page{max-width:730px; margin:0 auto; display: block; height:850px; float:left; }
}
in the main css file but no changes occur.
在主 css 文件中，但没有发生任何更改。
This is how my header looks like:
这是我的标题的样子：
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/image-slides.css" type="text/css">
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" type="text/css" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" />
The CSS property that I am trying to change is a simple's div's width and so when I resize the browser nothing happens.
我试图改变的 CSS 属性是一个简单的 div 的宽度，所以当我调整浏览器的大小时，什么也没有发生。
What is wrong with my code?
我的代码有什么问题？
回答by JerryHuang.me
Is your HTML properly set as such:
您的 HTML 是否正确设置为：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
</head>
<body>
//stuff
</body>
</html>
Use:
用：
@media screen and (min-width: 401px) and (max-width: 800px) { … }
Instead of:
代替：
@media (min-width: 401px) and (max-width: 800px) { … }
回答by Eshant Sahu
you can simply try the code like following to make your site responsive to make changes on phone view as well on resizing , I don't think where are exactly making bug in your code , but the given code works for me well :
您可以简单地尝试以下代码，使您的网站响应于对手机视图进行更改以及调整大小，我不认为您的代码中究竟在哪里产生错误，但给定的代码对我来说很好用：
<link rel='stylesheet' media='screen and (max-width: 700px)' href='stylesheets/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='stylesheets/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='stylesheets/wide.css' />
回答by bao vu dao
I think that is the way of ordering code.
我认为这是订购代码的方式。
Original CSS code should be placed first, then other screen with @mediaordered by size:
应先放置原始 CSS 代码，然后@media按大小排序其他屏幕：
...original CSS code...
@media(max-width:300px) {...}
@media(max-width:533px) {...}
@media(max-width:640px) {...}
回答by SAFEER N
try this
尝试这个
@media all and (min-width: 401px) and (max-width: 800px) {
/*your code here*/
}
