响应式网站设计原则

导语 在QA TechWeek 2014期间,QA公司首席技术专家David Walker在使用Foundation进行响应式设计的会议上,提出了响应式网站设计的原则。Walker提到从现有桌面网站创建移动应用网站的多种方式:原生应用,为每种移动
在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)。图片尺寸可以自适应,不超过最大显示宽度。

 

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

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

  • 为不同的设备和网络速度优化图片;
  • 为移动UI/UX改变导航模式;
  • 改变链接和按钮的样式,使其适于触摸;
  • 动态调整字体大小,以适应不同的屏幕分辨率;
  • 按需加载内容,而不是隐藏起来;
  • 提供图形的Retina版本。

    Walker还演示了如何使用Foundation创建响应式网站,Foundation是一个开源的响应式前端框架。另一个类似的解决方案是Bootstrap,它最初由Twitter开发。

 

http://www.aseoe.com/ true 响应式网站设计原则 http://www.aseoe.com/show-27-413-1.html report <?php echo strlen($content) / 2; ?> 在QA TechWeek 2014期间,QA公司首席技术专家David Walker在使用Foundation进行响应式设计的会议上,提出了响应式网站设计的原则。Walker提到从现有桌面网站创建移动应用网站的多种方式:原生应用,为每种移动
TAG:响应式 网站设计 原则
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-27-413-1.html

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)