为什么我@media的这个不生效？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
<style type="text/css">
 div{
            width:100%;
            height:300px;
            background:#fff;
            font-size:10px;
       }
        @media screen and (max-width:370px) {
       div{
            width:100%;
            height:300px;
            background:green;
            font-size:30px;
       }
        }
</style>
    <title>Document</title>
</head>
<body>
    <div>
        niahoahaodhoadaofa
    </div>
</body>
</html>

qq_涟_0 2017-09-08

源自：响应式布局 2-1 响应式的第一个小例子

收起

3回答

厉害的乌废猫回答被采纳获得+3积分 2017-09-08 14:41:43

html的head里面还要加<meta name="viewport" content="width=device-width, initial-scale=1.0">语句才能生效，这句话参数根据需要改

收起回答

qq_涟_0 提问者 #1

谢谢，试了一下确实这样，但是还有个问题： <!-- <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ color:purple; text-align:center; } /*此处写代码*/ @media screen and (min-width:450px) and (max-width:600px){ p{ color:blue; text-align:center; } } </style> </head> <body> <p> 我的颜色会随着屏幕大小的变化而变化。 </p> </body> </html> 这个不加也可以生效，是为什么？

2017-09-08 14:46:29
qq_涟_0 提问者 #2

非常感谢！

2017-09-08 18:12:37