网站建 设行业优质供应商

深圳网站建设-响应式WEB布局的概念、实践方法

发布时间:2019-01-25 04:36:32    阅读:710    作者:老谭建站
去年上半年,我开始 着手推动项目中响应式设计的落地。以官网 优化需求为契机,主动去 做了响应式的页面设计,也说服了产品、设计和 开发的相关同事一起把它上线落实,但不幸的是,由于各种方面的原因,比如,生搬硬套的PC模块,无差异 化的设计使得移动端阅读不佳,导航兼 容性有限等等原因,上线几 个月后又悄然下线。我不禁反思,项目中 是否应该推行响应式?今年年 初重新启动了全站响应式项目,从产品、交互、视觉到开发,各个角 色全方面参与了响应式项目,最终门 户的页面实现全面响应式。深圳网 站建设老谭建站来聊聊响应式WEB布局的概念、实践方法。


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


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


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


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


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


可弯曲、伸缩、扩展的墙体结构——可扩展的布局;


运动传感器——MediaQuery;


气候控制系统——栅格;


艺术装置——css等等。


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


可扩展的布局

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

QQ客服
友情链接:    金电玩棋牌电玩城   K3K棋牌游戏大厅   牛牛平台代理怎么赚钱   红豆棋牌网址   优乐彩票最新网址