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

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

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

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

第四课所涉及的主要内容

HTML

CSS

响应式设计概述

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

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

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

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

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

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

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

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

时间: 2024-08-14 20:50:03

HTML和CSS高级指南之四——响应式设计的相关文章

web设计经验<一> 提升移动设备响应式设计的8个建议

第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体验一般用户是没什么耐心的,这对于双方来说都不是好事.设计师和开发人员一定要牢记,在移动web环境中,动力是一个很关键的因素,漫长的响应时间加上杂乱的界面再加上不给力的移动设备(虽然最新的移动设备一般都很给力,但是如果在同时运行着10个游戏外加开着聊天软件另外网速也不好的情况下呢)就无法保证达到“一般性”的web体验,因此直观性具有很重要的作用. 直观不代表空白.丑

提升移动设备响应式设计的8个建议

现在,对于任何种类的网站开发来说,响应式Web设计都不能再局限于纸上谈兵,其是开发阶段的一个关键步骤.作为设计师和开发人员,我们必须要了解有效响应式设计的重要性以及其在保证优秀终端用户体验方面的作用. 随着web向着移动端逐步发展,现在响应能力对于网站来说已经必不可少.很多人没能在移动用户兴起时抓住时机进行顺应潮流,因此现在难以保证网站在移动设备上的体验流畅性. 我们必须承认,移动设备已经彻底改变了我们使用web的方式.2013年开展的一项调查显示,多达百分之73的用户会通过移动设备浏览网络,因

响应式设计的核心CSS技术Media(媒体查询器)

总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--兼容ie--><meta name="viewport" content="width=device-width, initial-scale=1"><!--得到媒体查询屏幕宽度,缩放比例--> 准备

响应式设计:理解设备像素,CSS像素和屏幕分辨率

概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的概念:屏幕分辨率和设备像素的区别在于设备像素显示密度. 当设备屏幕ZOOM=100%的时候,浏览器CSS像素尺寸和设备像素相等,而当像素密度(pixel density)为1的时候,屏幕分辨率和设备像素相等. 响应式设计 在响应式设计中,使用了viewport,device-width,media

css媒体查询:响应式网站

css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. 参考文章:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

第二次讨论——响应式设计、布局技巧、css性能优化、css预处理

第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于设备宽度,布局viewport等于度量viewport <meta name="viewport" content="width=device-width,initial-scale=1"> [[布局]] [水平居中] 一.text-align和inline

使用 CSS 媒体查询创建响应式网站

来自:http://www.ibm.com/developerworks/cn/web/wa-cssqueries/ 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网站,都可以呈现一个可用的界面.响应式设计可以响应各种屏幕大小,因此也成为了 “前瞻性” 的网站,屏幕将随着新的智能手机和平板电脑的问世而快速演变.实现响应式设计的主要途径是使用 CSS 媒体查询.在本文中,我们将了解如何将

Responsive Design ------响应式设计

什么是响应式设计呢?维基百科是这样对响应式作的描述:“Responsive设计简单的称为RWD,是精心提供 各种设备都能浏览网页的一种设计方法,RWD能让你的网页在不同的设备中展现不同的设计风格.”从这一点描述来说,RWD不是流体布局,也不是网格布局, 而是一种独特的网页设计方法. 响应式设计要考虑元素布局的秩序,而且还需要做到“有求必应”,那就需要满足以下三个条件:网站必须建立灵活的网格基础:引用到网站的图片必须是可伸缩的:不同的显示风格,需要在Media Queries上写不同的样式. 要想

使用 jQuery Mobile 和 CSS3 实现响应式设计

使用 jQuery Mobile 和 CSS3 实现响应式设计 创建可以适应每个用户的屏幕分辨率的 Web 页面布局 jQuery Mobile 框架就其本身而言就是一个优秀的解决方案,可以快速创建一个可访问的由 HTML5 标记驱动的移动网站.当与 CSS3 配合使用时,工作真的会变得很有趣,因为它使创建一个根据屏幕分辨率来响应用户设备的 Web 页面布局成为可能.本文展示了如何使用 jQuery Mobile 框架和 CSS3 媒体查询在您的 Web 页面中实现响应式设计. jQuery M