纯CSS响应式布局

纯CSS响应式布局： 

响应式布局CSS代码

/*响应式布局*/
.tpt-wp{margin:0 auto;width:100%}
.tpt-cm{font-size: 18px;color: #333;text-align: center;background: #f2f2f2;height: 200px;line-height: 200px;padding: 10px;margin: 10px;}
.tpt-md-4{float:left}
.tpt-md-3{float:left}
.tpt-md-2{float:left}
.tpt-md-1{width:100%}

/*浏览器宽度小于767px*/
@media only screen and (max-width:767px){
.tpt-md-4{width:50%}
.tpt-md-3{width:100%}
.tpt-md-2{width:100%}
.tpt-ml-3{display:none}
.tpt-mr-3{display:none}
.tpt-ml-7{width:100%}
.tpt-mr-7{width:100%}
}

/*浏览器宽度大于768px,小于1023px*/
@media only screen and (min-width:768px) and (max-width:1023px){
.tpt-md-4{width:50%}
.tpt-md-3{width:50%}
.tpt-md-2{width:50%}
.tpt-ml-3{display:none}
.tpt-mr-3{display:none}
.tpt-ml-7{width:100%}
.tpt-mr-7{width:100%}
}

/*浏览器宽度大于1024px,小于1199px*/
@media only screen and (min-width:1024px) and (max-width:1199px){
.tpt-md-4{width:33.33333333%}
.tpt-md-3{width:33.33333333%}
.tpt-md-2{width:50%}
.tpt-ml-3{float:left;width:30%}
.tpt-mr-3{float:right;width:30%}
.tpt-ml-7{float:left;width:70%}
.tpt-mr-7{float:right;width:70%}
}

/*浏览器宽度大于1200px*/
@media only screen and (min-width:1200px){
.tpt-md-4{width:25%}
.tpt-md-3{width:33.33333333%}
.tpt-md-2{width:50%}
.tpt-ml-3{float:left;width:30%}
.tpt-mr-3{float:right;width:30%}
.tpt-ml-7{float:left;width:70%}
.tpt-mr-7{float:right;width:70%}
.tpt-wp{width:1200px;margin:0 auto}
}
/*NET*/
四等分布局：

4
4
4
4
<div class="tpt-wp cl">
<ul>
<li class="tpt-md-4"><div class="tpt-cm">4</div></li>
<li class="tpt-md-4"><div class="tpt-cm">4</div></li>
<li class="tpt-md-4"><div class="tpt-cm">4</div></li>
<li class="tpt-md-4"><div class="tpt-cm">4</div></li>
</ul>
</div>
三等分布局：

3
3
3
<div class="tpt-wp cl">
<ul>
<li class="tpt-md-3"><div class="tpt-cm">3</div></li>
<li class="tpt-md-3"><div class="tpt-cm">3</div></li>
<li class="tpt-md-3"><div class="tpt-cm">3</div></li>
</ul>
</div>
二等分布局：

2
2
<div class="tpt-wp cl">
<ul>
<li class="tpt-md-2"><div class="tpt-cm">2</div></li>
<li class="tpt-md-2"><div class="tpt-cm">2</div></li>
</ul>
</div>
一等分布局：

1
<div class="tpt-wp cl">
<ul>
<li class="tpt-md-1"><div class="tpt-cm">1</div></li>
</ul>
</div>
左七右三布局：

7
3
<div class="tpt-wp cl">
<ul>
<li class="tpt-ml-7"><div class="tpt-cm">7</div></li>
<li class="tpt-mr-3"><div class="tpt-cm">3</div></li>
</ul>
</div>
左三右七布局：

3
7
<div class="tpt-wp cl">
<ul>
<li class="tpt-ml-3"><div class="tpt-cm">3</div></li>
<li class="tpt-mr-7"><div class="tpt-cm">7</div></li>
</ul>
</div>

 

转载于:https://www.cnblogs.com/yuesha/articles/7826496.html