第一種:link的方式:
<link rel="stylesheet" media="screen and (max-width:600px)" href="./css/blue.css">
<link rel="stylesheet" media="screen and (min-width:900px)" href="./css/red.css">
<link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/yellow.css">
第二種:css的方式:
<style>
@media screen and (max-width:600px) {
body {
background-color: blue;
}
}
@media screen and (min-width:900px) {
body {
background-color: red;
}
}
@media screen and (min-width:1200px) {
body {
background-color: yellow;
}
}
</style>