我正在尝试为不同的布局使用不同的 CSS 样式表(正如您已经从标题中猜到的那样)，但不幸的是没有任何效果。
我尝试加载 CSS 文件
<link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" />
在元标记中，我也尝试使用
@media (min-width: 401px) and (max-width: 800px) {
.page{max-width:730px; margin:0 auto; display: block; height:850px; float:left; }
}
在主 css 文件中，但没有发生任何变化。
这是我的标题的样子:
<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)" />
我试图更改的 CSS 属性是一个简单的 div 的宽度，因此当我调整浏览器大小时没有任何反应。
我的代码有什么问题？
最佳答案
您的 HTML 设置是否正确:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
</head>
<body>
//stuff
</body>
</html>
使用:
@media screen and (min-width: 401px) and (max-width: 800px) { … }
代替:
@media (min-width: 401px) and (max-width: 800px) { … }
关于html - CSS 媒体查询在任何地方都不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18470350/