码迷,mamicode.com
首页 > Web开发 > 详细

HTML和CSS高级指南之四——响应式设计

时间:2015-07-22 12:37:43      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:

互联网发展的速度超乎所有人的想象,甚至可以说是疯狂。在过去几年里,移动互联网的发展已经开始崭露头角。而他的发展速度也远远超过了传统互联网。

如今很难找到一个人既没有移动设备,也没有多个可以上网的设备。在英国 移动电话的数量已远远超过人口数,保持这样的 增长势头,今年移动互联网的使用应该就有望超过桌面互联网。

随着移动互联网的兴起,也带来了一个问题,就是如何搭建一个网站,可以适合所有用户访问。行业对于这个问题的回答是响应式设计,也就是熟知的RWD。

第四课所涉及的主要内容

HTML

CSS

响应式设计概述

响应式设计是一个网站搭建的实践尝试,他使得每种设备和屏幕尺寸都能很好的工作,而不论是大屏还是小屏,手机或是pc。响应式设计关注于提供每个人一个直观的感受和满足。使得pc和手机用户都能够从中受益。

响应式设计本身的很多术语是由Ethan Marcotte提出的。他们第一次出现在Ethan在线访谈和他的书中,而且响应式这本书也是很值得一读的。

技术分享

Food Sense是个很漂亮的网站,他响应所有不同的设备尺寸。不管设备尺寸大小如何,食物感官网站都可以轻松适应,给用户一个很自然的用户体验。(如上图所示)

响应式、自适应、移动的区别

响应式中的一些术语可能并不是新的,而其他术语又跟自适应或是移动有点像。那么你也许会困惑,他们之间的区别到底是什么?

响应式和自适应的关系很密切,经常二者是互通的。响应式通常意味着对待任何变化,反应更积极更快。而自适应往往是应对一个新需求或是情况的被动反应,例如变化。响应式设计应对不同因素的变化,都会很流畅自如,例如设备宽度。而自适应设计会基于一定的因素搭建。将二者结合是一种理想化,提供一个完美功能模式的网站,这个术语不会产生很大的歧义。

另一方面,移动设备,通常意味着需要为移动用户,专门搭建一个移动网站。然而这样做可能有些作用,却不是很好的主意。移动网站要求必须非常轻巧,然而他又很依赖一个新的代码库和浏览器的嗅探。所有的这些都是摆在开发者和用户面前的一个障碍。

目前在响应式设计中最流行的技术,就是对于不同浏览器和设备的动态布局设计,他会根据不同的浏览器和设备尺寸的变化,动态改变网页的布局和内容。这个解决方案充分发挥了响应式,自适应和移动设备的三方优势。

HTML和CSS高级指南之四——响应式设计

标签:

原文地址:http://www.cnblogs.com/huangqianfirst/p/4666825.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!