-
什么是媒体查询?
- 媒体查询就是获取到当前浏览器的宽度之后, 根据不同的宽度设置元素不同的样式
-
媒体查询的注意点
- 由于媒体查询需要根据不同的浏览器宽度调整元素的样式, 所以不适合用于比较复杂的网页
-
媒体查询的格式
- 在这里的media可以理解为英文的if(如果)
@media 条件{} 含义: 如果条件满足, 那么就执行后面{}中的代码 - 内联格式: @media 条件{}
- 在这里的media可以理解为英文的if(如果)
/*如果当前的网页是显示在电脑or平板or手机上的, 并且当前浏览器的宽度是大于等于1200px的, 那么就执行后面大括号中的代码*/
@media screen and (min-width: 1200px){
div{
width: 500px;
height: 500px;
background: red;
}
}
/*如果当前的网页是显示在电脑or平板or手机上的, 并且当前浏览器的宽度是小于等于1199px的, 那么就执行后面大括号中的代码*/
@media screen and (max-width: 1199px){
div{
width: 300px;
height: 300px;
background: green;
}
}
/*如果当前的网页是显示在电脑or平板or手机上的, 并且当前浏览器的宽度是小于等于768px的, 那么就执行后面大括号中的代码*/
@media screen and (max-width: 768px){
div{
width: 100px;
height: 100px;
background: blue;
}
}
- 外链格式: <link rel="stylesheet" href="css/xxx.css" media="条件">
| <!-- |
| | 1.在企业开发中, 如果需要分别给电脑/平板/手机分别设置样式, 那么我们会将电脑的样式写在前面, 平板的样式写在电脑的后面, 手机的样式写在平板的后面 |
| | 2.在企业开发中媒体查询中指定的宽度不是固定的, 指定的宽度是根据自己企业的需求来指定的, 并没有一个固定的值代表电脑的, 也没有一个固定的值代表平板的, 也没有一个固定的值代表手机的 |
| | --> |
| | <link rel="stylesheet" href="媒体查询CSS/index-pc.css" media="screen and (min-width: 1200px)">
| | <link rel="stylesheet" href="媒体查询CSS/index-pad.css" media="screen and (max-width: 1199px)">
| | <link rel="stylesheet" href="媒体查询CSS/index-phone.css" media="screen and (max-width: 768px)">
网友评论