当前位置:首页>>CSS综合

@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的设备 }示例/*

admin

@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

    }

}



{dede:include filename="menu.htm"/}