可扩展的布局

有一种流体布局的概念在早起web兴起的时,就开始盛行了。它的概念是说页面会根据浏览器窗口的变化进行更改,网站可以通过维护一套代码,保质一致性的设计。我这里强调的可扩展的布局也是基于这个概念,只是现在的方法多种多样,因此要强调页面布局的可扩展性。

可扩展的布局途径有很多,比如常见的百分比布局,以及一直未成为标准的栅格布局等等。

  • 框架

就从这框架来说,以一个常见的可扩展的三栏布局为例,就有数十种方法,这里抛砖引玉举几个例子。

方法1:

Demo1

方法2:

Demo2

方法3:

Demo3

方法4:

Demo4

方法5:

Demo5

方法6:

Demo6

方法7:

Demo7

方法8:

Demo8

方法9:

Demo9

除了上述总结的几种,还有更多更多的方法。两栏布局同理就不赘述。

此外W3C也有一个栅格化布局(Grid Layout)的规范,这个布局是基于两维栅格系统设计的,可以轻松按照我们的意愿改变页面的设计。它与Flexbox配合效果更佳。但目前仍处于草案阶段。翻看了W3C的最新草案内容,对Grid Layout的使用方法和原理简单介绍下。
 
1)定义grid:
 
首先在grid item外的父级容器上定义display: grid.
Values:
  • grid - 定义block-level的栅格;
  • inline - 定义 inline-level的栅格

2)一些相关概念:

  • grid lines - 是横向和纵向划分grid的线,它可以一朝数字顺序被指定,也可以用用户制定的名字被指定。

  • grid tracks - 指的是一个grid列或者行之前的区域,换而言之是两个相邻的grid lines之前的空间。下图是第二行和第三行之间的grid tracks。

  • grid cells - 一个grid cell指的是grid中最小的单位。

  • grid areas - 是用来展现一个或多个grid item的逻辑空间。它被四条grid line包围。

3)grid item 属性
了解了一些基本概念后,就可以更加绒里理解相关的grid item属性。
  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end
这四个属性中,grid-column-start和grid-row-start指明区域起始线,grid-column-end和grid-row-end指明区域结束线。这四个属性均有以下四个值可取。
Values:
  • <line> - 可以是一个数字,代表的是 grid line
  • span <number> - 该项会横跨所提供的数字个grid tracks
  • span <name> - 该项会横跨直到碰到下一个指定名字的grid line
  • auto - 自动或者默认属性

举个例子:

代表的区域就是:

除以上提到,grid还拥有更多的属性,使之可以定义grid item的宽高,间隙,内部自适应的方式,对齐方式等等。更多属性可以参考W3C文档

响应式Web设计 - 布局的更多相关文章

  1. 响应式Web设计 – 布局

    写在前面 去年上半年,我开始着手推动项目中响应式设计的落地.以官网优化需求为契机,主动去做了响应式的页面设计,也说服了产品.设计和开发的相关同事一起把它上线落实,但不幸的是,由于各种方面的原因,比如, ...

  2. CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

  3. 响应式WEB设计的9项基本原则

    响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...

  4. 如何通过CSS3 实现响应式Web设计

    如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...

  5. [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

    原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...

  6. css014 响应式web设计

    css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...

  7. 推荐35个新鲜出炉的响应式 Web 设计实例

    响应式设计的准则在于根据用户使用的屏幕的分辨率来改变网站的的布局.因此,视频或图像的大小和文本的数量,可以被视为是一个明显的变化.让你即使从智能手机浏览一个网站的时候能轻松地看到网站上的重要内容.今天 ...

  8. 响应式Web设计(Responsive Web design)

    中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 ...

  9. 什么是响应式Web设计?怎样进行?

    http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...

随机推荐

  1. Ubuntu GNOME 16.10 Beta 1问世了!

    导读 Ubuntu GNOME 16.10操作系统已经进入研发周期一段时间了,今天终于可以下载Beta 1版本进行测试了.作为Ubuntu官方flavor之一,Ubuntu GNOME团队非常努力的整 ...

  2. AssetBundle loading failed because.....已解决

    http://blog.csdn.net/ldghd/article/details/9632455 *****************************      一      ******* ...

  3. word如何插入目录

    word如何插入目录 百度经验:jingyan.baidu.com 在写文章的时候我们需要插入目录,如果自己手动添加目录会非常麻烦,以后修改文章的时候还得修改目录的页码,还好Word中有自动添加目录的 ...

  4. java基本算法之快速排序

    快速排序:是找出一个元素(理论上可以随便找一个)作为基准(pivot),然后对数组进行分区操作,使基准左边元素的值都不大于基准值,基准右边的元素值 都不小于基准值,如此作为基准的元素调整到排序后的正确 ...

  5. int main( int argc, char **argv)

    1.参数 (有时参数是void) argc是程序运行时参数个数 argv是存储参数的数组,可以用char* argv[],也可以用char **argv. 例如编译一个hello.c的程序 1 #in ...

  6. 基于STM32和W5500的Modbus TCP通讯

    在最近的一个项目中需要实现Modbus TCP通讯,而选用的硬件平台则是STM32F103和W5500,软件平台则选用IAR EWAR6.4来实现. 1.移植千的准备工作 为了实现Modbus TCP ...

  7. 【Java EE 学习 51】【Spring学习第三天】【cglib动态代理】【AOP和动态代理】【切入点表达式】

    一.cglib动态代理 1.简介 (1)CGlib是一个强大的,高性能,高质量的Code生成类库.它可以在运行期扩展Java类与实现Java接口. (2) 用CGlib生成代理类是目标类的子类. (3 ...

  8. 对DIP IoC DI的理解与运用

    DIP,IoC,DI基本概念 依赖倒置原则(DIP,Dependency Inverse Principle):强调系统的“高层组件”不应当依赖于“底层组件”,并且不论是“高层组件”还是“底层组件”都 ...

  9. UVA 11645 Bits(组合数学)

    从左往右处理,左半部分记为left, 右半部分记为right,若i,i -1均为1, 贡献为ans += (left + 1) + right * (1ll << (i - 1)); 否则 ...

  10. Ubuntu菜鸟入门(一)—— 截图工具安装

    Ubuntu截图工具Shutter 1.添加安装包软件源 sudo add-apt-repository ppa:shutter/ppa 2.更新源并安装 shutter sudo apt-get u ...