响应式Web设计 – 布局 responsive web design layout

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看165 回复回复2 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 165|回复: 2
收起左侧

响应式Web设计 – 布局 responsive web design layout

[复制链接]
h5lover 发表于 2016-7-21 00:54:45 | 显示全部楼层 |阅读模式
快来登录
获取优质的苹果资讯内容
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
订阅梳理好了的知识点专辑
本帖最后由 h5lover 于 2016-7-21 01:00 编辑



0、写在前面

去年上半年,我开始着手推动项目中响应式设计的落地。以官网优化需求为契机,主动去做了响应式的页面设计,也说服了产品、设计和开发的相关同事一起把它上线落实,但不幸的是,由于各种方面的原因,比如,生搬硬套的PC模块,无差异化的设计使得移动端阅读不佳,导航兼容性有限等等原因,上线几个月后又悄然下线。我不禁反思,项目中是否应该推行响应式?今年年初重新启动了全站响应式项目,从产品、交互、视觉到开发,各个角色全方面参与了响应式项目,最终门户的页面实现全面响应式。在项目过程中有技术沉淀,也有不少的思考,也就有了以下的文字。文章的内容围绕四个方面,响应式的概念、实践方法、一些案例、以及一些看法。

响应式Web设计 – 布局 responsive web design layout 00

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 00





1、概念

Ehan Marcotte 为A List Apart写过一篇介绍型的文章 《响应式网页设计》 。文中讲到响应式的概念源自响应式建筑设计,即房间或者空间会根据其内部人群数量和流动而变化。

[最近一门新兴的学科“响应式建筑(responsive architecture)”开始在探讨物理空间根据流动于其中的人进行响应的方法。建筑师们通过把嵌入式机器人与可拉伸材料结合的方法,尝试艺术装置和可弯曲、伸缩和扩展的墙体结构,达到根据接近人群的情况变化的效果。运动传感器与气候控制系统相结合,调整围绕人们周围的房间的温度以及环境照明。已经有公司制造了“智能玻璃技术”,当室内人数达到一定的阀值时,它可以自动变为不透明状态,为人们提供更多隐私保护。]

Web响应式设计的概念与之也非常相似。在如今技术飞快发展的时代,一向是以快论英雄,设备和分辨率日新月异,就以分类相对明晰的iPhone为例,就有多达4种的分辨率和屏幕尺寸,更别提厂商蓬勃发展的安卓机领域。因此,为每种设备或者特定设备分辨率制定相应的独立版本是非常费时费力的事情。

Web响应式设计的理念,应当是,页面可以根据用户的设备环境,包括系统、分辨率、屏幕尺寸等等因素,进行自发式调整,提供更适合当前环境的阅读和操作体验,对已有和未来即将出现的新设备有一定的适应能力。




2、实践

有了概念,一定要谈谈实现的方法。类似于响应式建筑,Web页面也有对应关键因素。

  • 可弯曲、伸缩、扩展的墙体结构——可扩展的布局;
  • 运动传感器——MediaQuery;
  • 气候控制系统——栅格;
  • 艺术装置——css等等。


以上给了我写文章的脉络结构灵感,于是先从最基础的布局谈起。



2.1、可扩展的布局

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

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


2.1.1、框架

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

响应式Web设计 – 布局 responsive web design layout 0

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 0



方法1:

响应式Web设计 – 布局 responsive web design layout 1

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 1


Demo1

方法2:

响应式Web设计 – 布局 responsive web design layout 2

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 2


Demo2

方法3:

响应式Web设计 – 布局 responsive web design layout 3

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 3


Demo3

方法4:

响应式Web设计 – 布局 responsive web design layout 4

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 4


Demo4

方法5:

响应式Web设计 – 布局 responsive web design layout 5

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 5


Demo5

方法6:

响应式Web设计 – 布局 responsive web design layout 6

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 6


Demo6

方法7:

响应式Web设计 – 布局 responsive web design layout 7

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 7


Demo7

方法8:

响应式Web设计 – 布局 responsive web design layout 8

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 8


Demo8

方法9:

响应式Web设计 – 布局 responsive web design layout 9

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 9


Demo9

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


2.1.2、栅格布局

此外W3C也有一个栅格化布局(Grid Layout)的规范,这个布局是基于两维栅格系统设计的,可以轻松按照我们的意愿改变页面的设计。它与Flexbox配合效果更佳。但目前仍处于草案阶段。翻看了W3C的最新草案内容,对Grid Layout的使用方法和原理简单介绍下。


1)定义grid:

首先在grid item外的父级容器上定义display: grid。

响应式Web设计 – 布局 responsive web design layout 10

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 10


响应式Web设计 – 布局 responsive web design layout 11

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 11


Values:

  • grid – 定义block-level的栅格;
  • inline – 定义 inline-level的栅格。



2)一些相关概念:

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

响应式Web设计 – 布局 responsive web design layout 12

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 12


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

响应式Web设计 – 布局 responsive web design layout 13

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 13


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

响应式Web设计 – 布局 responsive web design layout 14

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 14


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

响应式Web设计 – 布局 responsive web design layout 15

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 15



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 – 自动或者默认属性


举个例子:

响应式Web设计 – 布局 responsive web design layout 16

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 16


代表的区域就是:

响应式Web设计 – 布局 responsive web design layout 17

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 17


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


4)浏览器支持:

令人遗憾的是,浏览器的支持度还未尽人意,未来在UA上获取更多支持才是Grid发展的根本。

响应式Web设计 – 布局 responsive web design layout 18

响应式Web设计 – 布局 responsive web design layout - 敏捷大拇指 - 响应式Web设计 – 布局 responsive web design layout 18


框架搭建好,才仅仅是响应式的开始。但是俗语有云:Well begun is half done.  响应式从做好的布局开始。




作者:feihuangfu Fufu


都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

代码买卖 发表于 2016-7-22 21:33:39 | 显示全部楼层
响应式~~
代码买卖 发表于 2016-7-22 21:34:00 | 显示全部楼层

响应式跟自适应,应该是一回事吧
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表