响应式网站设计原则

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

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

要作到响应式设计，Walker建议遵循如下原则：

创建流动布局（Fluid layout）。全部容器的宽度必须定义成浏览器Viewport的百分比。

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

使用自适应图片（Fluid image）。图片尺寸能够自适应，不超过最大显示宽度。

要决定样式适用于哪一种媒体类型，你须要肯定有哪些不一样的显示宽度。经过Chrome扩展Responsive Inspector查看。经过这些样式，time.com的内容将在浏览器层面自动布局，所以即便在不一样宽度的设备上显示，页面也不须要水平滚动。

Walker表示，响应式网站设计还须要考虑：

为不一样的设备和网络速度优化图片；

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

改变连接和按钮的样式，使其适于触摸；

动态调整字体大小，以适应不一样的屏幕分辨率；

按需加载内容，而不是隐藏起来；

提供图形的Retina版本。