<!--
1.什么是媒体查询?
媒体查询就是获取到当前浏览器的宽度之后, 根据不同的宽度设置元素不同的样式
2.媒体查询的注意点
由于媒体查询需要根据不同的浏览器宽度调整元素的样式, 所以不适合用于比较复杂的网页
3.媒体查询的格式
在这里的media可以理解为英文的if(如果)
@media 条件{} 含义: 如果条件满足, 那么就执行后面{}中的代码
3.1内联格式: @media 条件{}
3.2外链格式: <link rel="stylesheet" href="css/xxx.css" media="条件">
-->
媒体查询基本使用1
/*如果当前的网页是显示在电脑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;
}
}
媒体查询基本使用2
<!--
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)">
