加入收藏 | 设为首页 | 会员中心 | 我要投稿 西双版纳站长网 (https://www.0691zz.com.cn/)- 数据计算、IT业界、服务器、教程、云日志!
当前位置: 首页 > 服务器 > 系统 > 正文

响应式Web之流式网格系统

发布时间:2020-03-17 02:00:23 所属栏目:系统 来源:站长网
导读:副标题#e# 随着移动端用户的增加,我们希望设计出来的网页能同时使用PC和移动端设备,同一个网页增对不同的设备显示效果也不一样,这时需要用到响应式设计。这里我先介绍一下流式网格系统。如果了解过 Bootstrap和Foundation框架的读者就能发现这两个框架都

  <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 端显示结果如下:

响应式Web之流式网格系统

在手机端显示如下:

响应式Web之流式网格系统

(编辑:西双版纳站长网)

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

热点阅读