快活林资源网

响应式Web之流式网格系统
网页制作 2024/12/23 佚名
3 1
快活林资源网 Design By www.csstdc.com

随着移动端用户的增加，我们希望设计出来的网页能同时使用PC和移动端设备，同一个网页增对不同的设备显示效果也不一样，这时需要用到响应式设计。这里我先介绍一下流式网格系统。如果了解过 Bootstrap和Foundation框架的读者就能发现这两个框架都提供了独特的网格系统。但是我们一般不会只为了使用网格系统而引入某一个框架，因此这里介绍一下如何根据自己需求设计一个流式网格系统。

为了网页能根据设备自由缩放，在 \<\head> 元素中添加以下 \<\meta> 标签:
复制代码代码如下:<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

 •width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
 •initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕。
 
@media查询

@media 查询是CSS3的语法规则。使用@media 查询可以针对不同的媒体类型定义不同的样式，另外可以针对不同的屏幕尺寸设置不同的样式。@media的CSS语法规则如下：

CSS Code复制内容到剪贴板
  1. @media mediatype and|not|only (media feature) {   
  2.     CSS-Code;   
  3. }   
  4.   

例如：

CSS Code复制内容到剪贴板
  1. @media only screen and (max-width: 400px){   
  2.     body {   
  3.         background-color:lightblue;   
  4.     }   
  5. }   
  6.   

表示只在媒体类型是数字屏幕而且宽度为400px或者更小时，则修改背景演示(background-color)。
另外我们也可以通过@media针对不同的媒体使用不同 stylesheets :
复制代码代码如下:<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

构造网格

需求描述：设计一个网格系统，在PC端显示1行8列，而在手机端显示2行4列

HTML代码如下：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
  6.     <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />  
  7. </head>  
  8.   
  9. <body>  
  10.   <div class="row">  
  11.   <div class="grid m-grid-1 d-grid-1">  
  12.   </div>  
  13.   <div class="grid m-grid-1 d-grid-1">  
  14.   </div>  
  15.   <div class="grid m-grid-1 d-grid-1">  
  16.   </div>  
  17.   <div class="grid m-grid-1 d-grid-1">  
  18.   </div>  
  19.   <div class="grid m-grid-1 d-grid-1">  
  20.   </div>  
  21.   <div class="grid m-grid-1 d-grid-1">  
  22.   </div>  
  23.   <div class="grid m-grid-1 d-grid-1">  
  24.   </div>  
  25.   <div class="grid m-grid-1 d-grid-1">  
  26.   </div>  
  27. </div>  
  28. </body>  
  29. </html>  
  30.   

CSS代码如下：

CSS Code复制内容到剪贴板
  1. .row{   
  2.   width:100%;   
  3.   max-width:1024px; /*设置最大的宽度，一般为PC端才起作用*/  
  4.   margin:0 auto;   
  5.   outline: 1px solid blue;    
  6.   
  7. }   
  8.   
  9. /*为row类清除浮动来防止由浮动元素造成的外边距折叠*/  
  10. .row:before,.row:after {content: " ";display: table;}   
  11. .row:after {clear: both;}   
  12.   
  13. /*设置每一列的格式*/  
  14. .grid{   
  15.   height:20px;   
  16.   float:left;   
  17.   margin:1%;   
  18.   outline:1px solid red;   
  19. }   
  20.   
  21. /*设置每一个移动设备上m-grid-1类的宽度值，m-grid-2类为m-grid-1的两倍，以此类推*/  
  22. .m-grid-1{width:23%;}   
  23. .m-grid-2{width:48%;}   
  24. .m-grid-3{width:73%;}   
  25. .m-grid-4{width:98%;}   
  26.   
  27. /*为宽度大于或等于960px的设备设置列的宽度*/  
  28. @media (min-width:960px){   
  29.   .d-grid-1{width:10.5%;}   
  30.   .d-grid-2{width:23%;}   
  31.   .d-grid-3{width:35.5%;}   
  32.   .d-grid-4{width:48%;}   
  33.   .d-grid-5{width:60.5%;}   
  34.   .d-grid-6{width:73%;}   
  35.   .d-grid-7{width:85.5%;}   
  36.   .d-grid-8{width:98%;}   
  37. }   
  38.   

在PC 端显示结果如下：

响应式Web之流式网格系统

在手机端显示如下：

响应式Web之流式网格系统

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

原文链接：http://blog.csdn.net/u014607184/article/details/51593836

快活林资源网 Design By www.csstdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
快活林资源网 Design By www.csstdc.com
www.csstdc.com 快活林资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
快活林资源网 Design By www.csstdc.com