响应式Web之流式网格系统

  <div class="grid m-grid-1 d-grid-1">  

  </div>  

  <div class="grid m-grid-1 d-grid-1">  

  </div>  

  <div class="grid m-grid-1 d-grid-1">  

  </div>  

  <div class="grid m-grid-1 d-grid-1">  

  </div>  

  <div class="grid m-grid-1 d-grid-1">  

  </div>  

</div>  

</body>  

</html>  

CSS代码如下：

CSS Code复制内容到剪贴板

.row{   

  width:100%;   

  max-width:1024px; /*设置最大的宽度，一般为PC端才起作用*/  

  margin:0 auto;   

  outline: 1px solid blue;    

}   

/*为row类清除浮动来防止由浮动元素造成的外边距折叠*/  

.row:before,.row:after {content: " ";display: table;}   

.row:after {clear: both;}   

/*设置每一列的格式*/  

.grid{   

  height:20px;   

  float:left;   

  margin:1%;   

  outline:1px solid red;   

}   

/*设置每一个移动设备上m-grid-1类的宽度值，m-grid-2类为m-grid-1的两倍，以此类推*/  

.m-grid-1{width:23%;}   

.m-grid-2{width:48%;}   

.m-grid-3{width:73%;}   

.m-grid-4{width:98%;}   

/*为宽度大于或等于960px的设备设置列的宽度*/  

@media (min-width:960px){   

  .d-grid-1{width:10.5%;}   

  .d-grid-2{width:23%;}   

  .d-grid-3{width:35.5%;}   

  .d-grid-4{width:48%;}   

  .d-grid-5{width:60.5%;}   

  .d-grid-6{width:73%;}   

  .d-grid-7{width:85.5%;}   

  .d-grid-8{width:98%;}   

}   

在PC 端显示结果如下：

在手机端显示如下：

（编辑：宣城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!