引入方式：
- 写法一
<style>
#div0 {
width: 200px;
height: 100px;
}
@media screen and (max-width: 199px) {
#div0 {
background: black;
}
}
@media screen and (min-width: 200px) and (max-width: 300px) {
#div0 {
background: red;
}
}
@media screen and (min-width: 301px) and (max-width: 500px) {
#div0 {
background: green;
}
}
@media screen and (min-width: 501px) {
#div0 {
background: blue;
}
}
</style>
</head>
<body>
<div id="div0"></div>
</body>
- 写法二
<style>
#div0 {
width: 200px;
height: 100px;
}
</style>
<style media="(max-width: 199px)">
#div0 {
background: red;
}
</style>
<style media="(min-width: 200px) and (max-width: 300px)">
#div0 {
background: green;
}
</style>
<style media="(min-width: 301px)">
#div0 {
background: blue;
}
</style>
</head>
<body>
<div id="div0"></div>
</body>
- 写法三
扫一扫
4465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
