我是想在不同宽度设备下显示不同大小文字和背景色，可就是无法实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>菜鸟教程(runoob.com)</title>
<style>
body{background:#fff;}
@media screen and(max-width:768px){
html{font-size:10px;}
body{background:red;}
}
@media screen and(min-width:768px)and(max-width:992px){
html{font-size:20px;}
body{background:yellow;}
}
@media screen and(min-width:992px)and(max-width:1200px){
html{font-size:30px;}
body{background:green;}
}
@media screen and(min-width:1200px){
html{font-size:40px;}
body{background:blue;}
}
h1{font-size:2rem;}
p{font-size:1.2rem;}
</style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>菜鸟教程(runoob.com)</title>
<style>
body{background:#fff;}
@media screen and(max-width:768px){
html{font-size:10px;}
body{background:red;}
}
@media screen and(min-width:768px)and(max-width:992px){
html{font-size:20px;}
body{background:yellow;}
}
@media screen and(min-width:992px)and(max-width:1200px){
html{font-size:30px;}
body{background:green;}
}
@media screen and(min-width:1200px){
html{font-size:40px;}
body{background:blue;}
}
h1{font-size:2rem;}
p{font-size:1.2rem;}
</style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
