响应式网站设计原则

在QA TechWeek 2014期间,QA公司首席技术专家David Walker在使用Foundation进行响应式设计的会议上,提出了响应式网站设计的原则。Walker提到从现有桌面网站创建移动应用网站的多种方式:原生应用,为每种移动操作系统开发一个应用;嵌入式HTML 5,使用PhoneGap或者类似的工具;在服务端过滤,分别为桌面和移动设备建立网站,在两者间进行重定向。

分析完每种方法的优缺点后,Walker提出了响应式设计(RWD),使用HTML 5、JavaScript和CSS创建响应式网站,根据设备即时调整布局、格式和内容。RWD的主要好处是避免内容剃重复,使网站能够适应所有设备,包括未来设备的尺寸。缺点是需要优秀的CSS和JavaScript技能,有些资源在移动网络中太大,针对旧版本的浏览器需要Polyfill。

要做到响应式设计,Walker建议遵循以下原则:

建立流动布局(Fluid layout)。所有容器的宽度必须定义成浏览器Viewport的百分比。

使用CSS3 Media Query。针对不同的媒体类型如屏幕、打印机、电视等等,以及不同的媒体参数,如宽度、高度、颜色、分辨率等等,使用不同的样式。

使用自适应图片(Fluid image)。图片尺寸可以自适应,不超过最大显示宽度。

要决定样式适用于哪种媒体类型,你需要确定有哪些不同的显示宽度。通过Chrome扩展Responsive Inspector查看。通过这些样式,time.com的内容将在浏览器层面自动布局,因此即使在不同宽度的设备上显示,页面也不需要水平滚动。

Walker表示,响应式网站设计还需要考虑:

为不同的设备和网络速度优化图片;

为移动UI/UX改变导航模式;

改变链接和按钮的样式,使其适于触摸;

动态调整字体大小,以适应不同的屏幕分辨率;

按需加载内容,而不是隐藏起来;

提供图形的Retina版本。

响应式网站设计原则,布布扣,bubuko.com

时间: 2024-10-07 07:37:04

响应式网站设计原则的相关文章

响应式网站设计

关于media的各种写法:css2中和css3中 http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml 使用media queries的网站锦集 http://mediaqueri.es/ 慕课网 viewport 表示可视区域,通常情况下,苹果手机如果viewport中content不设置内容的话,我们的width:980px会缩小一倍,然后看上去正常. 但是如果width:320的宽度的话,也会缩小一倍,比如图所示

响应式网站设计---Bootstrap

响应式布局可以帮助我们实现网站布局随屏幕大小自动调整的需求,实现不同屏幕分辨率的终端上浏览网页的不同展示方式,使得网页在PC端和手机端均可以完美的展现其内容,具有自适应性. 使用基于Bootstrap的栅格系统 Bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性.在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码).Bootstrap的官方解释:Bootstrap提供了一套响应式.移动设备优先的流式栅格系统,随着屏

响应式网站设计 - 最佳实践

一.移动优先 手机设计稿通常更为简约,由手机设计稿开始制作简单版本,随着平板和桌面的引入,页面慢慢复杂,这是一个递增的过程,前期把精力放到核心模块上,默认打开简洁的手机样式,而负责的样式包裹在media query中,所以不会加载,这样访问速度是最佳的 .content { /*basic effects designed for mobile devices*/ } @media screen and (min-width: 400px) { /*complicate effects for

响应式站点设计之使用指南

自从 Ethan Marcotte创造了这个词(响应式)以来,我们一直在寻找如何真正的设计出一个响应式网站,5年之后人们正式定义并且认可了这个词,我们现在能正确的理解这个词的意义,其旨在创建响应式APPS. 问题是:它并不是真正的工具(就像frameworks和effects),它与经验相关.直到几年前,没有人去关心转化率这些,我们是为了设计而设计的.我们旨在创建漂亮的网站,不多也不少. 但是在这数十年的转变中,我们才开始意识到乔布斯当时所说的意义: 我们早在2006年就明白了一个网站的设计95

响应式Web设计(Responsive Web design)的理念

页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率.图片尺寸及相关脚本功能等,以适应不同设备:换句话说,页面应该有能力去自动响应用户的设备环境.响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了

【经验分享】响应式网站项目实操过程中的那些事儿

本次网站改版升级是我来到新公司的第一个项目,需求之初并没有提及要做响应式,在首次评审时领导和研发均认为响应式处理与我们网站相对契合,就这样我开始了我职场生涯中第一个响应式网站设计.下面就跟大家分享响应式网站设计中的那些事儿. 因为本人之前并没有接触过响应式设计,在项目开始前便恶补了一些响应式的基础知识.理论性资料网上众多,为了使各位对响应式有初步印象和认知,我在这里只做简单描述,各位若想要更全面深入的了解可自行百度. 1什么叫响应式设计,为什么要做响应式设计 (1)页面的设计和开发应当根据用户行

H5响应式网站制作的4个目标原则

对于用户体验效果在网站建设中的重要性,网站建设页面方面的布局问题,一直以来都是不同企业.商家关注的信息要点.细节决定了整个H5响应式网站建设的效果,不管是排列.色彩反差效果还是字体效果,最终都会直接影响网站带给大家的美感以及专业度,网站的目标必须要具有一定程度的可行性的,必须在网站建设之前就要完成制定网站的目标制定??. 1.可分析性 网站目标的设定一定要有可分析性,什么是可分析性呢?简单的说就是在满足用户的需求的时候,我们得到的网站结果要具有分析的特点,我们通过分析可以得出网站下一阶段的发展规

设计出色响应式网站的十个技巧

移动技术并没有渐退的迹象,反而对于个人和企业去建立门户网站,必须考虑移动用户已经变成了趋势.对于那些在不同设备上看起来很酷.功能十分有效的正在发展中的网站,响应式设计仍保持实践性.作为一个Web设计师,也会尝试用各种各样的网页设计技术.如果响应式设计趋势让你印象深刻,并且也打算用响应式设计深入研究网站创新,那么你已经来到了初学者的门口.这里,已经包含了10个关于设计一个完美的响应式网站的很酷的建议.因此,让我们深入了解这些建议. 1. 确保性能是你主要的目标 不管现在移动设备的网络连接速度有多快

做响应式网站前期必会知识点-1前期准备

媒体查询 1.媒体类型 @media screen and (max-width: 300px) { body { background-color:lightblue; } } 其中media后面的那个单词是媒体类型 all所有媒体类型(默认,可以不写),screen屏幕,这两个是最常用的. 2.逻辑操作符 媒体查询的意思就是后面这个逻辑表达式为真,里面的css起作用. 中间and是逻辑操作符 and 与      都为真才真 or或逗号   有一个真就为真 not 非       not的有