Question

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

我的代码出了什么问题？

Answer 1

您的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) { … }

Answer 2

你可以简单地尝试下面的代码，让你的网站响应在电话视图上进行更改以及调整大小，我不认为你的代码中究竟出现了什么错误，但是给定的代码对我很有用：

<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' />

Answer 3

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

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

...original CSS code...

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

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

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

Answer 4

试试这个

@media all  and (min-width: 401px) and (max-width: 800px) {
    /*your code here*/
}

Answer 5

在我看来，此代码有效。.

我遇到了同样的问题

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='stylesheets/medium.css' />

Answer 6

<meta name="viewport" content="width=device-width">

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

CSS媒体查询无法在任何地方运行

6 个答案:

在我看来，此代码有效。.

我遇到了同样的问题