@media适配各种屏幕
@media (min- 768px){ >=768的设备 }@media (min- 992px){ >=992的设备 }@media (min- 1200){ >=1200的设备 }注意min跟max的区别,一个大于等于,另一个小于等于@media (max- 1199){ <=1199的设备 }@media (max- 991px){ <=991的设备 }@media (max- 767px){ <=768的设备 }示例/*
@media (min-width: 1280px) and (max-width: 1440px){
.elementor-313 .elementor-element.elementor-element-a36ef46 > .elementor-container
{
min-height: 500px;
}
}
以上为1280至1440的CSS
单个为
@media (min-width: 1280px){
.elementor-313 .elementor-element.elementor-element-a36ef46 > .elementor-container
{
min-height: 500px;
}
}
用以以上这个最好兼容!
@media screen and (min- 768px){ >=768的设备 }
@media screen and (min- 992px){ >=992的设备 }
@media screen and (min- 1200){ >=1200的设备 }
注意min跟max的区别,一个大于等于,另一个小于等于
@media screen and (max- 1199){ <=1199的设备 }
@media screen and (max- 991px){ <=991的设备 }
@media screen and (max- 767px){ <=768的设备 }
根据电脑不同屏幕尺寸(分辨率)的例表得到了几个宽度:1024、1200、1280、1366、1440、1600、1680、1920。目前最常用的为1920。
示例
/*当页面宽度大于1000px且小于1200px的时候执行,1000-1200*/
@media screen and (min-1000px) and (max- 1200px){
body{
font-size:16px
}
}
/*当页面宽度大于1280px且小于1366px的时候执行,1280-1366*/
@media screen and (min-1280px) and (max- 1366px){
body{
font-size:18px
}
}
/*当页面宽度大于1440px且小于1600px的时候执行,1440-1600*/
@media screen and (min-1440px) and (max-1600px){
body{
font-size:20px
}
}
/*当页面宽度大于1680px且小于1920px的时候执行,1680-1920*/
@media screen and (min-1680px) and (max-1920px){
body{
font-size:22px
}
}