媒体查询media的3种引入方式
第一种：利用@media引入
在<style>...</style>标签里使用@media来实现媒体查询
<!DOCTYPE html>
<html lang="en">
<body>
<div id="box"></div>
</body>
<style>
@media (min-device-width: 300px) and (max-device-width: 500px) {
#box {
width: 100px;
height: 100px;
background-color: cadetblue;
}
}
@media (min-device-width: 501px) {
#box {
width: 100px;
height: 100px;
background-color: blueviolet;
}
}
</style>
</html>
第二种：
在<style>...</style>标签上使用media=""
⚠️ 注意： and左右的空格和小括号都不能少
<!DOCTYPE html>
<html lang="en">
<body>
<div id="box"></div>
</body>
<style media="(min-device-width: 300px) and (max-device-width: 500px)">
#box {
width: 100px;
height: 100px;
background-color: cadetblue;
}
</style>
<style media="(min-device-width: 501px)">
#box {
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
</html>
第三种：
在<link>...</link>标签上使用media=""
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet" href="./style1.css"
media="(min-device-width: 300px) and (max-device-width: 500px)"
/>
<link
rel="stylesheet" href="./style2.css"
media="(min-device-width: 501px)"
/>
</head>
<body>
<div id="box"></div>
</body>
</html>
