响应式Web之流式网格系统

时间:2021-05-08

随着移动端用户的增加,我们希望设计出来的网页能同时使用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复制内容到剪贴板
  • @mediamediatypeand|not|only(mediafeature){
  • CSS-Code;
  • }
  • 例如:

    CSS Code复制内容到剪贴板
  • @mediaonlyscreenand(max-width:400px){
  • body{
  • background-color:lightblue;
  • }
  • }
  • 表示只在媒体类型是数字屏幕而且宽度为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复制内容到剪贴板
  • <!DOCTYPEhtml>
  • <html>
  • <head>
  • <metacharset="UTF-8">
  • <metaname="viewport"content="width=device-width,initial-scale=1.0"/>
  • <linkrel="stylesheet"href="css/style.css"media="screen"type="text/css"/>
  • </head>
  • <body>
  • <divclass="row">
  • <divclass="gridm-grid-1d-grid-1">
  • </div>
  • <divclass="gridm-grid-1d-grid-1">
  • </div>
  • <divclass="gridm-grid-1d-grid-1">
  • </div>
  • <divclass="gridm-grid-1d-grid-1">
  • </div>
  • <divclass="gridm-grid-1d-grid-1">
  • </div>
  • <divclass="gridm-grid-1d-grid-1">
  • </div>
  • <divclass="gridm-grid-1d-grid-1">
  • </div>
  • <divclass="gridm-grid-1d-grid-1">
  • </div>
  • </div>
  • </body>
  • </html>
  • CSS代码如下:

    CSS Code复制内容到剪贴板
  • .row{
  • width:100%;
  • max-width:1024px;
  • margin:0auto;
  • outline:1pxsolidblue;
  • }
  • .row:before,.row:after{content:"";display:table;}
  • .row:after{clear:both;}
  • .grid{
  • height:20px;
  • float:left;
  • margin:1%;
  • outline:1pxsolidred;
  • }
  • .m-grid-1{width:23%;}
  • .m-grid-2{width:48%;}
  • .m-grid-3{width:73%;}
  • .m-grid-4{width:98%;}
  • @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 端显示结果如下:

    在手机端显示如下:

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

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

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章