成都网站建设-响应式WEB布局的概念、实践方法
2016-10-03 分类： 网站建设
去年上半年，我开始着手推动项目中响应式设计的落地。以官网优化需求为契机，主动去做了响应式的页面设计，也说服了产品、设计和开发的相关同事一起把它上线落实，但不幸的是，由于各种方面的原因，比如，生搬硬套的PC模块，无差异化的设计使得移动端阅读不佳，导航兼容性有限等等原因，上线几个月后又悄然下线。我不禁反思，项目中是否应该推行响应式?今年年初重新启动了全站响应式项目，从产品、交互、视觉到开发，各个角色全方面参与了响应式项目，最终门户的页面实现全面响应式。成都网站建设创新互联来聊聊响应式WEB布局的概念、实践方法。
概念
Ehan Marcotte 为A List Apart写过一篇介绍型的文章 响应式网页设计>。文中讲到响应式的概念源自响应式建筑设计，即房间或者空间会根据其内部人群数量和流动而变化。
「最近一门新兴的学科“响应式建筑(responsive architecture)”开始在探讨物理空间根据流动于其中的人进行响应的方法。建筑师们通过把嵌入式机器人与可拉伸材料结合的方法，尝试艺术装置和可弯曲、伸缩和扩展的墙体结构，达到根据接近人群的情况变化的效果。运动传感器与气候控制系统相结合，调整围绕人们周围的房间的温度以及环境照明。已经有公司制造了“智能玻璃技术”，当室内人数达到一定的阀值时，它可以自动变为不透明状态，为人们提供更多隐私保护。」
Web响应式设计的概念与之也非常相似。在如今技术飞快发展的时代，一向是以快论英雄，设备和分辨率日新月异，就以分类相对明晰的iPhone为例，就有多达4种的分辨率和屏幕尺寸，更别提厂商蓬勃发展的安卓机领域。因此，为每种设备或者特定设备分辨率制定相应的独立版本是非常费时费力的事情。
Web响应式设计的理念，应当是，页面可以根据用户的设备环境，包括系统，分辨率，屏幕尺寸等等因素，进行自发式调整，提供更适合当前环境的阅读和操作体验，对已有和未来即将出现的新设备有一定的适应能力。
实践
有了概念，一定要谈谈实现的方法。类似于响应式建筑，Web页面也有对应关键因素。
可弯曲、伸缩、扩展的墙体结构——可扩展的布局;
运动传感器——MediaQuery;
气候控制系统——栅格;
艺术装置——css等等。
以上给了我写文章的脉络结构灵感，于是先从最基础的布局谈起。
可扩展的布局
有一种流体布局的概念在早起web兴起的时，就开始盛行了。它的概念是说页面会根据浏览器窗口的变化进行更改，网站可以通过维护一套代码，保质一致性的设计。我这里强调的可扩展的布局也是基于这个概念，只是现在的方法多种多样，因此要强调页面布局的可扩展性。
概念
Ehan Marcotte 为A List Apart写过一篇介绍型的文章 响应式网页设计>。文中讲到响应式的概念源自响应式建筑设计，即房间或者空间会根据其内部人群数量和流动而变化。
「最近一门新兴的学科“响应式建筑(responsive architecture)”开始在探讨物理空间根据流动于其中的人进行响应的方法。建筑师们通过把嵌入式机器人与可拉伸材料结合的方法，尝试艺术装置和可弯曲、伸缩和扩展的墙体结构，达到根据接近人群的情况变化的效果。运动传感器与气候控制系统相结合，调整围绕人们周围的房间的温度以及环境照明。已经有公司制造了“智能玻璃技术”，当室内人数达到一定的阀值时，它可以自动变为不透明状态，为人们提供更多隐私保护。」
Web响应式设计的概念与之也非常相似。在如今技术飞快发展的时代，一向是以快论英雄，设备和分辨率日新月异，就以分类相对明晰的iPhone为例，就有多达4种的分辨率和屏幕尺寸，更别提厂商蓬勃发展的安卓机领域。因此，为每种设备或者特定设备分辨率制定相应的独立版本是非常费时费力的事情。
Web响应式设计的理念，应当是，页面可以根据用户的设备环境，包括系统，分辨率，屏幕尺寸等等因素，进行自发式调整，提供更适合当前环境的阅读和操作体验，对已有和未来即将出现的新设备有一定的适应能力。
实践
有了概念，一定要谈谈实现的方法。类似于响应式建筑，Web页面也有对应关键因素。
可弯曲、伸缩、扩展的墙体结构——可扩展的布局;
运动传感器——MediaQuery;
气候控制系统——栅格;
艺术装置——css等等。
以上给了我写文章的脉络结构灵感，于是先从最基础的布局谈起。
可扩展的布局
有一种流体布局的概念在早起web兴起的时，就开始盛行了。它的概念是说页面会根据浏览器窗口的变化进行更改，网站可以通过维护一套代码，保质一致性的设计。我这里强调的可扩展的布局也是基于这个概念，只是现在的方法多种多样，因此要强调页面布局的可扩展性。
网站栏目：成都网站建设-响应式WEB布局的概念、实践方法
链接地址：https://www.cdcxhl.com/news/49892.html
网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站建设等
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
猜你还喜欢下面的内容
- 成都网站建设-营销型网站设计要对哪些方面做定位分析 2016-10-03
- 成都网站建设首页设计的几个方法 2016-10-02
- 成都网站建设-网页设计时一些实用的小技巧，让你的网站更添色彩！ 2016-10-02
- 网站建设之网页设计字体的细节 2016-09-30
- 成都网页设计来和大伙聊聊网站建设好后怎么运营 2016-10-03
- 企业网站建设底部设计要注意的细节介绍 2016-10-03
- 成都网站建设：如何把网站设计做得更好 2016-10-02
- 网页设计要在网站建设前的“四不要” 2016-10-02
- 网站建设之界面设计的相关技巧 2016-10-02
- 成都网站建设-企业在设计网站时究竟用什么风格才合适 2016-10-02
- 营销应网站建设应该如何去规划和设计 2016-10-02
- 网站建设时设计师具体会涉及那些工作内容 2016-10-01
- 网站建设策划 2016-09-30
- 电商网站如何设计才能让人印象深刻-成都网站建设 2016-09-30
- 房产类网站设计-成都网站建设 2016-09-30
- 成都高端网站建设公司如何展现页面设计的？ 2016-09-30
- 网站建设应站在SEO优化的角度来考虑设计 2016-09-29
- 网站建设时移动端的该如何去设计制作 2016-09-29
- 中小企业网站建设之如何确定网站的设计风格？ 2016-09-29