福建体彩的官方网站百度百度百度百度百度百度|福彩快三官方网
<返回列表

响应式Web设计 - 布局



写在前面

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

概念

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

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

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

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

实践

有了概念,一定要谈谈实现的方法。类似于响应式建筑,Web页面也有对应关键因素。
以上给了我写文章的脉络结构灵感,于是先从最基础的布局谈起。

可扩展的布局

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

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

  • 框架

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

0

方法1:

1

Demo1

方法2:

2

Demo2

方法3:

3

Demo3

方法4:

4

Demo4

方法5:

5

Demo5

方法6:

6

Demo6

方法7:

7

Demo7

方法8:

8

Demo8

方法9:

9

Demo9

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

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

2)一些相关概念:

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

g3

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

g4

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

g5

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

g6

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

举个例子:

g7

代表的区域就是:

g8

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

4)浏览器支持:
令人遗憾的是,浏览器的支持度还未尽人意,未来在UA上获取更多支持才是Grid发展的根本。
grid
框架搭建好,才仅仅是响应式的开始。但是?#23376;鎘性疲篧ell begun is half done.  响应式从做好的布局开始。

 

 
?#34892;?#20320;的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。
注明出处格式:腾讯ISUX (http://isux.tencent.com/


上一篇:总结整理时下流行的浏览器User-Agent大全
下一篇:动感特效轻松get




关于aiweisheji.com爱伟设计

aiweisheji.com爱伟设计是一家专注用户体验设计的互联网品牌建设设计公司,创始人于2012年从业至今已经为超过200多位客户提供了创新与专业的设计方案。设计服务范围包括网站设计与开发建设、移动及软件产品界面设计、图标设计、品牌及平面设计等。我们的价值与宗旨是为用户和客户打造更适合且有效的设计,用设计提升产品?#25512;?#19994;品牌价值。

查看精选案例   |  服务体系    |  爱伟设计动态



更多阅读

【转】小米生态链是如何在三年孵化77家企业,4个独角兽的?

【转】小米生态链是如何在三年孵化77家

前端技术 2017-05-29

小米的战略布局究竟如何?小?#30528;?#22823;的生态链如何管理?小米生态链谷仓学院院长洪华博士近期为大家揭开小米的秘 查看全文
总结整理时下流行的浏览器User-Agent大全

总结整理时下流行的浏览器User-Agent大全

前端技术 2016-07-16

User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent?#24067;?#31216;UA。它是一个特殊字符串头, 查看全文
动感特效轻松get

动感特效轻松get

前端技术 2017-10-26

爱伟建站 是一家聊城做网站的公司,聊城专业做网站的公司。关注设计,关注前端表现。 查看全文
返回全部新闻
扫描二维码分享到微信
确 认

Copyright ? 2016 aiweisheji.com 鲁ICP备15005020号-1 | 网站地图 友情链接: |检车车 |潍?#25442;墙?#32946; |聊城网络公司

扫描二维码关注我们:aiweisheji.com爱伟设计
确 认
福建体彩的官方网站百度百度百度百度百度百度 浙江快乐12遗乐爱彩乐 重庆时时彩一期一计划 3d彩票近1000期走势图彩经网 踢球者手机足球指数 app足球游戏 四川快乐十二怎样下载 二八杠网站 快速时时彩网址 28365体育投注首页 天津时时官方网