媒体查询
概念:为不同尺寸的屏幕设定不同的css样式
媒体查询常用参数
属性名称
作用
width,height
浏览器可视宽度,高度
device-width
设备屏幕宽度
device-height
设备屏幕高度
div{
width: 200px;
height: 200px;
}
@media screen and (min-width: 500px) and (max-width: 700px){
div{
background-color: red;
}
}
@media screen and (min-width: 701px) {
div{
background-color: blue;
}
}
浏览器可视宽度高度
#div0 {
width: 100%;
height: 500px;
}
#div0 div{
float: left;
height: 200px;
}
/* 1行显示三个div */
@media screen and (min-device-width:400px) {
/* 最小400px 最大不限 */
#div0 div{
width: 33.3%;
}
#div0 div:nth-child(1){
background-color: red;
}
#div0 div:nth-child(2){
background-color:blue;
}
#div0 div:nth-child(3){
background-color: green;
}
}
/* 2行显示三个div */
@media screen and (min-device-width:300px) and (max-device-width:399px) {
#div0 div{
width: 50%;
}
#div0 div:nth-child(1){
background-color: red;
}
#div0 div:nth-child(2){
background-color:blue;
}
#div0 div:nth-child(3){
background-color: green;
}
}
/* 3行显示三个div */
@media screen and (min-device-width:200px) and (max-device-width:299px) {
#div0 div{
width: 100%;
}
#div0 div:nth-child(1){
background-color: red;
}
#div0 div:nth-child(2){
background-color:blue;
}
#div0 div:nth-child(3){
background-color: green;
}
}
设备宽度高度
媒体查询引入方式-1
写在style标签中,有条件的执行某个内部样式表
<style media="(min-device-width:300px) and (max-device-width:399px)">
#div0 div{
width: 50%;
}
</style>
<style media="(min-device-width:400px) and (max-device-width:499px)">
#div0 div{
width: 33.3%;
}
</style>