语法:
@media mediatype and|not|only (media feature) {
CSS-Code;
}
mediatype媒体类型:
![](https://images2018.cnblogs.com/blog/970312/201805/970312-20180523173043963-661006446.png)
实现方式:
@media screen and (min-width: **px) and (max-width: **px){
CSS-Code;
}
CSS-Code:
.row{ &:after{ content:""; height:0; display:block; clear:both; } zoom:1; } [class*="col-"]{ float:left; box-sizing: border-box; } @media screen and (min-width: 0px) and (max-width: 768px){ .col-xs-0{ width: 0%; overflow: hidden; } .col-xs-1{ width: 4.16666667%; } .col-xs-2{ width: 8.333333333%; } .col-xs-3{ width: 12.5%; } .col-xs-4{ width: 16.66666667%; } .col-xs-5{ width: 20.83333333%; } .col-xs-6{ width: 25%; } .col-xs-7{ width: 29.16666667%; } .col-xs-8{ width: 33.33333333%; } .col-xs-9{ width: 37.5%; } .col-xs-10{ width: 41.66666667%; } .col-xs-11{ width: 45.83333333%; } .col-xs-12{ width: 50%; } .col-xs-13{ width: 54.16666667%; } .col-xs-14{ width: 58.33333333%; } .col-xs-15{ width: 62.5%; } .col-xs-16{ width: 66.66666667%; } .col-xs-17{ width: 70.83333333%; } .col-xs-18{ width:75%; } .col-xs-19{ width: 71.16666667%; } .col-xs-20{ width:83.33333333%; } .col-xs-21{ width: 87.5%; } .col-xs-22{ width:91.66666667%; } .col-xs-23{ width: 95.83333333%; } .col-xs-24{ width:100%; } } @media screen and (min-width: 769px) and (max-width: 1024px){ .col-sm-0{ width: 0%; overflow: hidden; } .col-sm-1{ width: 4.16666667%; } .col-sm-2{ width: 8.333333333%; } .col-sm-3{ width: 12.5%; } .col-sm-4{ width: 16.66666667%; } .col-sm-5{ width: 20.83333333%; } .col-sm-6{ width: 25%; } .col-sm-7{ width: 29.16666667%; } .col-sm-8{ width: 33.33333333%; } .col-sm-9{ width: 37.5%; } .col-sm-10{ width: 41.66666667%; } .col-sm-11{ width: 45.83333333%; } .col-sm-12{ width: 50%; } .col-sm-13{ width: 54.16666667%; } .col-sm-14{ width: 58.33333333%; } .col-sm-15{ width: 62.5%; } .col-sm-16{ width: 66.66666667%; } .col-sm-17{ width: 70.83333333%; } .col-sm-18{ width:75%; } .col-sm-19{ width: 71.16666667%; } .col-sm-20{ width:83.33333333%; } .col-sm-21{ width: 87.5%; } .col-sm-22{ width:91.66666667%; } .col-sm-23{ width: 95.83333333%; } .col-sm-24{ width:100%; } } @media screen and (min-width: 1025px) and (max-width: 1200px){ .col-md-0{ width: 0%; overflow: hidden; } .col-md-1{ width: 4.16666667%; } .col-md-2{ width: 8.333333333%; } .col-md-3{ width: 12.5%; } .col-md-4{ width: 16.66666667%; } .col-md-5{ width: 20.83333333%; } .col-md-6{ width: 25%; } .col-md-7{ width: 29.16666667%; } .col-md-8{ width: 33.33333333%; } .col-md-9{ width: 37.5%; } .col-md-10{ width: 41.66666667%; } .col-md-11{ width: 45.83333333%; } .col-md-12{ width: 50%; } .col-md-13{ width: 54.16666667%; } .col-md-14{ width: 58.33333333%; } .col-md-15{ width: 62.5%; } .col-md-16{ width: 66.66666667%; } .col-md-17{ width: 70.83333333%; } .col-md-18{ width:75%; } .col-md-19{ width: 71.16666667%; } .col-md-20{ width:83.33333333%; } .col-md-21{ width: 87.5%; } .col-md-22{ width:91.66666667%; } .col-md-23{ width: 95.83333333%; } .col-md-24{ width:100%; } } @media screen and (min-width: 1201px){ .col-lg-0{ width: 0%; overflow: hidden; } .col-lg-1{ width: 4.16666667%; } .col-lg-2{ width: 8.333333333%; } .col-lg-3{ width: 12.5%; } .col-lg-4{ width: 16.66666667%; } .col-lg-5{ width: 20.83333333%; } .col-lg-6{ width: 25%; } .col-lg-7{ width: 29.16666667%; } .col-lg-8{ width: 33.33333333%; } .col-lg-9{ width: 37.5%; } .col-lg-10{ width: 41.66666667%; } .col-lg-11{ width: 45.83333333%; } .col-lg-12{ width: 50%; } .col-lg-13{ width: 54.16666667%; } .col-lg-14{ width: 58.33333333%; } .col-lg-15{ width: 62.5%; } .col-lg-16{ width: 66.66666667%; } .col-lg-17{ width: 70.83333333%; } .col-lg-18{ width:75%; } .col-lg-19{ width: 71.16666667%; } .col-lg-20{ width:83.33333333%; } .col-lg-21{ width: 87.5%; } .col-lg-22{ width:91.66666667%; } .col-lg-23{ width: 95.83333333%; } .col-lg-24{ width:100%; } }
说明:
1、父元素设置class.row清除它的子元素col-**的浮动,避免浮动造成的父元素高度的塌陷;
2、.col-**-0使该元素在对应条件下隐藏;
3、.col-**设置:box-sizing:border-box是我自己习惯用传统的盒子模型。