响应式Web之流式网格系统

随着移动端用户的增加，我们希望设计出来的网页能同时使用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语法规则如下：

@media mediatype and|not|only (media feature) {CSS-Code;
}

例如：

@media only screen and (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代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head><body><div class="row"><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 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代码如下：

.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之流式网格系统相关推荐

服务器流式响应,HttpClient在收到服务器响应后无法停止流式传输
我一直在使用.NET 4.5中的HttpClient挣扎了一段时间.在通过分块传输对WebApi端点进行大型流式上传时,如果服务器已通过非成功状态代码(未找到,认证,授权,验证错误等)响应中间请求,则 ...
Web前端学习笔记09：移动web开发流式布局_flex布局
文章目录移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 1.2 手机屏幕的现状 1.3移动端调试方法 2.0 视口 2.1 布局视口 layout viewport 2.3理想视口 i ...
非流式语音合成和流式语音合成
语音合成技术:https://zhuanlan.zhihu.com/p/113282101 流式语音合成技术揭秘与实践 1.非流式语音合成,一次性输入文字,一次性输出语音,注重语音合成系统的整体运算 ...
辐流式重力浓缩池计算_注册考试重点！平流式、竖流式、辐流式、斜板式4大沉淀池构型...
[喜讯!2006-2018年注册给排水空白真题电子版.2019年注册给排水考试用规范电子版(共46本)开放下载啦!领取方式:关注本号+转发此文,私信留言"历年真题"即可获得真题下载 ...
平流式沉淀池表面负荷怎么计算_竖流式与辐流式沉淀池
全文共1780字,阅读时间约8分钟今天主要讲一下竖流式沉淀池和辐流式沉淀池的结构组成及工艺计算等内容. 竖流式沉淀池顾名思义,竖流式沉淀池的水流在沉淀池中竖向流动.其构造如上图所示,竖流 ...
完美解释：wenet-流式与非流式语音识别统一模型
Unified Streaming and Non-streaming Two-pass End-to-end Model for Speech Recognition[1] ,本文以该篇论文为主线, ...
Web前端学习笔记10：移动web开发流式布局_flex布局
文章目录移动web开发之rem布局 1 rem基础 1.1 rem单位 2 媒体查询 2.1 什么是媒体查询 2.2 媒体查询语法规范 3 less 基础 3.1 维护css弊端 3.2 Less ...
ajax流式传输,直接流式传输JSON以响应Jackson
小编典典您要解决的问题是 return writer.writeValueAsString(getData); 造成太大的String并导致了OutOfMemoryError.Jackson支持St ...
前端与移动开发----移动web开发----流式布局（内附流式布局案例---京东）
移动web流式布局 ☞移动端基础概念介绍[了解] 1.知识点-移动设备-屏幕尺寸屏幕尺寸: 代表的是移动设备屏幕对角线的长度 ,单位是寸 2.知识点-移动设备-物理分辨率物理分辨率: 代表的就是 ...

响应式Web之流式网格系统

@media查询

构造网格

响应式Web之流式网格系统相关推荐

最新文章

热门文章