css 媒体查询常用方法

Posted 2021-05-13

## Media Query Common Approach


<style type="text/css">
/*** base styles   ***/
* {
  box-sizing: border-box;
  margin:0;
  padding: 0;
} 

.cfx::before {
  content: "";
  clear:both;
  display: table;
}

.cfx::after {
  content: "";
  clear: both;
  display: table;
}

/* simple responsive framework */

.row {
  width: 100%;
}

/******* large devices only ********/
@media screen and (min-width: 1200px) {
.col-olg-1,.col-olg-2,.col-olg-3,.col-olg-4,.col-olg-5,.col-olg-6,.col-olg-7,.col-olg-8,
.col-olg-9,.col-olg-10,.col-olg-11,.col-olg-12 {
  float: left;
  border:1px solid green;
}
.col-olg-1 {
  width: 8.33%;
}
.col-olg-2 {
  width: 16.66%;
}
.col-olg-3 {
  width: 25%;
}
.col-olg-4 {
  width: 33%;
}
.col-olg-5 {
  width: 41.66%;
}
.col-olg-6 {
  width: 50%;
}
.col-olg-7 {
  width: 58.33%;
}
.col-olg-8 {
  width: 66.66%;
}
.col-olg-9 {
  width: 74.99%;
}
.col-olg-10 {
  width: 83.33%;
}
.col-olg-11 {
  width: 91.06%;
}
.col-olg-12 {
  width: 100%;
}

}/* endof large media query */

/******* medium devices only ********/
@media screen and (min-width: 992px) and (max-width: 1199px) {
.col-omd-1,.col-omd-2,.col-omd-3,.col-omd-4,.col-omd-5,.col-omd-6,.col-omd-7,.col-omd-8,
.col-omd-9,.col-omd-10,.col-omd-11,.col-omd-12 {
  float: left;
  border:1px solid green;
}
.col-omd-1 {
  width: 8.33%;
}
.col-omd-2 {
  width: 16.66%;
}
.col-omd-3 {
  width: 25%;
}
.col-omd-4 {
  width: 33%;
}
.col-omd-5 {
  width: 41.66%;
}
.col-omd-6 {
  width: 50%;
}
.col-omd-7 {
  width: 58.33%;
}
.col-omd-8 {
  width: 66.66%;
}
.col-omd-9 {
  width: 74.99%;
}
.col-omd-10 {
  width: 83.33%;
}
.col-omd-11 {
  width: 91.06%;
}
.col-omd-12 {
  width: 100%;
}

}/* endof medium media query */




/******* small devices only ********/
@media screen and (min-width: 1200px) {
.col-osm-1,.col-osm-2,.col-osm-3,.col-osm-4,.col-osm-5,.col-osm-6,.col-osm-7,.col-osm-8,
.col-osm-9,.col-osm-10,.col-osm-11,.col-osm-12 {
  float: left;
  border:1px solid green;
}
.col-osm-1 {
  width: 8.33%;
}
.col-osm-2 {
  width: 16.66%;
}
.col-osm-3 {
  width: 25%;
}
.col-osm-4 {
  width: 33%;
}
.col-osm-5 {
  width: 41.66%;
}
.col-osm-6 {
  width: 50%;
}
.col-osm-7 {
  width: 58.33%;
}
.col-osm-8 {
  width: 66.66%;
}
.col-osm-9 {
  width: 74.99%;
}
.col-osm-10 {
  width: 83.33%;
}
.col-osm-11 {
  width: 91.06%;
}
.col-osm-12 {
  width: 100%;
}

}/* endof small media query */








</style>