要决定样式适用于哪种媒体类型，你需要确定有哪些不同的显示宽度。

在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开发。

网页名称：要决定样式适用于哪种媒体类型，你需要确定有哪些不同的显示宽度。
标题来源：https://www.cdcxhl.com/news/47013.html

成都网站建设公司_创新互联，为您提供营销型网站建设、静态网站、网站策划、小程序开发、微信公众号、网站排名

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联