Question

这是css代码：

@media (max-width:600) {
body{
    background-color:red;
    }
}
p{
  color:blue;   
}

问题是@media部分根本不起作用。我在3台设备（包括PC）上进行了测试，并尝试更改浏览器的窗口大小。但是，当我在(max-width:600)上更改screen时，整个过程都有效。可能有什么不对？另外，将media='max-width:600'添加到<link>标记会导致css崩溃（在这种情况下整个css根本不起作用） - 这是什么？

P.S。：上面的代码并添加media='....'在codecademy.com codebit中有效，但在我的网站上不起作用，在那里我测试整个事情。（http://peoples.pw）

Answer 1

在<meta name="viewport" content="width=device-width; initial-scale=1.0;" />代码

中使用<head>

和css在宽度上使用px

@media (max-width:600px) {
body{
    background-color:red;
    }
}
p{
  color:blue;   
}

Answer 2

你错过了这个单位。我想你正在使用像素，所以它就是这样的：

@media (max-width:600px) {
body{
    background-color:red;
    }
}
p{
  color:blue;   
}

演示：http://jsbin.com/fovesaci/1/

修改：关于第二个问题，您需要将其放在括号中。所以这个media='max-width: 600px'应该是这样的media='(max-width: 600px)'。这是一个合理的错误，因为媒体attr主要用于print，screen或all，它们根本没有括号。

相同的@media不适用于不同的网站

2 个答案: