純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

總結

以上是生活随笔為你收集整理的纯CSS响应式布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。