媒体查询就是获取到当前浏览器的宽度之后, 根据不同的宽度设置元素不同的样式
媒体查询的注意点
由于媒体查询需要根据不同的浏览器宽度调整元素的样式, 所以不适合用于比较复杂的网页
媒体查询的使用格式
在这里的
media可以理解为英文的if(如果)@media条件{} 含义: 如果条件满足, 那么就执行后面{}中的代码
内联格式: @media 条件{}
外链格式: <link rel="stylesheet" href="css/xxx.css" media="条件">
在企业开发中, 如果需要分别给电脑 / 平板 / 手机分别设置样式, 那么我们会将电脑的样式写在前面, 平板的样式写在电脑的后面, 手机的样式写在平板的后面
在企业开发中媒体查询中指定的宽度不是固定的, 指定的宽度是根据自己企业的需求来指定的, 并没有一个固定的值代表电脑的, 也没有一个固定的值代表平板的, 也没有一个固定的值代表手机的
例如一个需求如下
- PC 显示小牛(大于等于 980)
- pad 显示小猪(小于 980, 并且大于等于 620)
- phone 显示小马(小于 620)
实现代码如下所示，使用的为内联格式
代码语言：html复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询-内联格式</title>
<style>
* {
margin: 0;
padding: 0;
}
/*
如果浏览器的宽度大于等于 980, 那么就执行后面 {} 中的代码
*/
@media (min-width: 980px) {
body {
background: url("images/animal1.png");
}
}
/*
如果浏览器的宽度大于等于 620, 并且宽度小于 980, 那么就执行后面 {} 中的代码
注意点: and的两边必须添加空格
*/
@media (min-width: 620px) and (max-width: 979px) {
body {
background: url("images/animal2.png");
}
}
/*
如果浏览器的宽度小于620, 那么就执行后面 {} 中的代码
*/
@media (max-width: 619px) {
body {
background: url("images/animal3.png");
}
}
</style>
</head>
<body>
</body>
</html>外链格式的实现代码如下所示
代码语言：html复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询-外链式</title>
<link rel="stylesheet" href="144-style-pc.css" media="(min-width:980px)">
<link rel="stylesheet" href="144-style-pad.css" media="(min-width:620px) and (max-width:979px)">
<link rel="stylesheet" href="144-style-phone.css" media=" (max-width:619px)">
</head>
<body>
</body>
</html>
我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表
