标签:css3 code min round 100% body box -- html
width: calc(50% - 20px);
// 在宽度50%的情况下,减去20px的值
<!-- col-md-4 -->
<!-- 适用于应屏幕宽度大于 768px 的场景 -->
<div class="row">
<div class="col-md-4 col col-sm-6"></div>
<div class="col-md-4 col col-sm-6"></div>
<div class="col-md-4 col col-sm-12"></div>
</div>
<div class="row">
<div class="col-md-3 col col-sm-3"></div>
<div class="col-md-6 col col-sm-6"></div>
<div class="col-md-3 col col-sm-3"></div>
</div>
<div class="row">
<div class="col-md-1 col-sm-2 col "></div>
<div class="col-md-1 col-sm-2 col"></div>
<div class="col-md-2 col-sm-8 col"></div>
<div class="col-md-2 col-sm-3 col"></div>
<div class="col-md-6 col-sm-3 col"></div>
</div>
body {
margin: 0;
padding: 0;
height: 100%;
}
.row {
clear: both;
height: auto;
}
.row .col {
box-sizing: border-box;
border: 1px solid #999999;
background-color: #EEEEEE;
height: 50px;
float: left;
margin: 10px 10px 10px 10px;
}
/* 最小宽度769px */
@media only screen and (min-width: 769px){
.row .col-md-6 {
width: calc(50% - 20px);
}
.row .col-md-4 {
width: calc( 33.3% - 20px)
}
.row .col-md-3 {
width: calc(25% - 20px)
}
.row .col-md-2 {
width: calc(16.7% - 20px)
}
.row .col-md-1 {
width: calc(8.3% - 20px)
}
}
/* 最大宽度 768px */
@media only screen and (max-width: 768px){
.row .col-sm-6 {
width: calc(50% - 20px);
}
.row .col-sm-12 {
width: calc( 100% - 20px)
}
.row .col-sm-8 {
width: calc( 66.6% - 20px)
}
.row .col-sm-3 {
width: calc(25% - 20px)
}
.row .col-sm-2 {
width: calc(16.7% - 20px)
}
.row .col-sm-1 {
width: calc(8.3% - 20px)
}
}
标签:css3 code min round 100% body box -- html
原文地址:http://www.cnblogs.com/ar13/p/7966243.html