在QA TechWeek2014 期间,QA公司首席技术专家David Walker在 使用Foundation进行响应式设计的会议上,提出了响应式网站设计的原则。Walker提到从现有桌面网站创建移动应用网站的多种方式:原生应用,为每种移动操作系统开发一个应用;嵌入式HTML5,使用PhoneGap或者类似的工具;在服务端过滤,分别为桌面和移动设备建立网站,在两者间进行重定向。
分析完每种方法的优缺点后,Walker提出了响应式设计(RWD),使用HTM L5、JavaScript和CSS创建响应式网站,根据设备即时调整布局、格式和内容。RWD的主要好处是避免内容剃重复,使网站能够适应所有设备,包括未来设备的尺寸。缺点是需要优秀的CSS和JavaScript技能,有些资源在移动网络中太大,针对旧版本的浏览器需要Polyfill。
要做到响应式设计,Walker建议遵循以下原则:
建立流动布局(Fluid layout) 。所有容器的宽度必须定义成浏览器Viewport的百分比。
使用CSS3 Media Query。针对不同的媒体类型如屏幕、打印机、电视等等,以及不同的媒体参数,如宽度、高度、颜色、分辨率等等,使用不同的样式。
使用自适应图片(Fluid image) 。图片尺寸可以自适应,不超过最大显示宽度。
要决定样式适用于哪种媒体类型,你需要确定有哪些不同的显示宽度。
Walker表示,响应式网站设计还需要考虑:
为不同的设备和网络速度优化图片;
为移动UI/UX改变导航模式;
改变链接和按钮的样式,使其适于触摸;
动态调整字体大小,以适应不同的屏幕分辨率;
按需加载内容,而不是隐藏起来;
提供图形的Retina版本。
Walker还演示了如何使用Foundation创建响应式网站,Foundation是一个开源的响应式前端框架。另一个类似的解决方案是Bootstrap,它最初由Twitter开发。
免费学习课堂
推荐文章
响应式网站设计的原则及经验
来源:北京汇仁智杰科技有限公司 时间:2016-06-17 点击: 次
推荐文章
- 织梦dedecms漏洞修复大全含任意文件2016-09-05
- 整顿微信公众号过度营销 对严重违2016-01-26
- SEO优化过程要避免什么?2016-01-26
- 网站空间被挂马的原因原因及解决2016-01-26
- 2016企业该如何运用互联网进行营销2016-01-26
- WEB前端项目开发中需注意的细节2016-01-26
- 低价网站建设的危害有哪些?2016-01-15
- 如何详细的分析你网站的竞争对手2015-06-10
- 网站设计中四个常犯的错误2015-01-22
- 如何搭配网站设计中的色彩?2015-01-22