1

我正在尝试对不同的布局使用不同的 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 的宽度，所以当我调整浏览器的大小时没有任何反应。

我的代码有什么问题？

4

5 回答 5

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) { … }
于 2013-08-27T16:32:48.530 回答
5

您可以简单地尝试以下代码，以使您的网站响应在电话视图上进行更改以及调整大小，我不认为您的代码中究竟在哪里制造错误，但给定的代码对我很有效：

<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' />
于 2013-08-27T16:33:22.287 回答
5

我认为这是订购代码的方式。

应先放置原始 CSS 代码，然后再放置@media按大小排序的其他屏幕：

...original CSS code...

@media(max-width:300px) {...}  

@media(max-width:533px) {...}  

@media(max-width:640px) {...}
于 2015-07-11T13:54:17.417 回答
0

尝试这个

@media all  and (min-width: 401px) and (max-width: 800px) {
    /*your code here*/
}
于 2013-08-27T17:10:17.890 回答
-1 
<meta name="viewport" content="width=device-width">

这是一个例子。它是响应式设计。

于 2013-08-28T08:40:55.580 回答