dll*_*ire 1 html css css3 media-queries
我试图使用不同的CSS样式表用于不同的布局(正如你已经从标题中猜到的那样),但遗憾的是没有任何工作.
我试着加载CSS文件
<link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" />
在meta标签中我也尝试过使用
@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的宽度,所以当我调整浏览器大小时没有任何反应.
我的代码出了什么问题？
Jer*_*.me 10
您的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) { … }
您可以简单地尝试下面的代码,以使您的网站响应以在电话视图上进行更改以及调整大小,我不认为在您的代码中究竟在哪里制造错误,但是给定的代码对我很有用:
<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' />
小智 5
我认为这是订购代码的方式.
应首先放置原始CSS代码,然后@media按大小排序其他屏幕:
...original CSS code...
@media(max-width:300px) {...}
@media(max-width:533px) {...}
@media(max-width:640px) {...}