响应式网页设计

响应式网页设计（RWD）是一种网页设计方法，可使网页在各种设备以及窗口或屏幕尺寸上都能很好地呈现。最近的工作也将观看者的接近度作为观看上下文的一部分视为RWD的扩展。所有设备上的内容，设计和性能都是必需的，以确保可用性和满意度。

设计成具有RWD A位点通过使用流体，基于比例的网格适配布局到视听环境，灵活的图像和CSS3 媒体查询，通过@media以下方式扩展了规则：

• 流体网格概念要求页面元素的大小以相对单位（例如百分比）而不是xxx单位（例如pixel或points）为单位。
• 柔性图像的大小也以相对单位为单位，以防止它们显示在其包含元素之外。
• 媒体查询允许页面根据要在其上显示站点的设备的特征（例如，渲染表面的宽度（浏览器窗口的宽度或物理显示大小））使用不同的CSS样式规则。
• 响应式布局会自动调整并适应任何设备的屏幕尺寸，无论是台式机、笔记本电脑、平板电脑还是手机。

响应式网页设计变得越来越重要，因为移动流量现在已占Internet总流量的一半以上。因此，谷歌在2015年宣布了Mobilegeddon，并开始提高如果搜索是通过移动设备进行的，则这些网站对移动设备友好。响应式网页设计是用户界面可塑性的一个示例。

SEO中的响应式网页设计使访问者可以轻松浏览您的网站。无论设备是什么。它可以为您的网站提供更好的用户体验，因为他们可以随时随地获取信息。如果您的网站没有响应式网页设计，则Google将因提供不良的用户体验而受到处罚。

注意：尽管您的网站设计良好，但是如果您的页面在智能手机上没有响应且对移动设备不友好，则无法在SERP（搜索引擎结果页面）上排名更高。

“移动优先”，顺畅的JavaScript和渐进式增强是RWD之前的相关概念。基本手机的浏览器不了解JavaScript或媒体查询，因此建议的做法是创建一个基本网站并为智能手机和个人计算机对其进行增强，而不是依靠优雅的降级来制作复杂的图像-手机上的繁重现场工作。

由于使用移动设备的大量互联网流量，它们不再被忽略。2014年，通过移动设备访问互联网的用户首次超过了台式机。网站必须支持缺少JavaScript的基本移动设备时，浏览器（“用户代理”）检测（也称为“ 浏览器嗅探 ”）和移动设备检测是两种推论的方法：支持CSS和CSS功能（作为渐进增强的基础）—但是，除非与设备功能数据库一起使用，否则这些方法并不完全可靠。

对于功能更强大的手机和PC，流行的JavaScript框架（如Modernizr，jQuery和jQuery Mobile）可以直接测试浏览器对HTML / CSS功能的支持（或识别设备或用户代理）。Polyfills可用于在Internet Explorer上添加对功能的支持，例如，支持媒体查询（RWD需要），并增强HTML5支持。特征检测可能也不是完全可靠的。有些人可能会报告某个功能可用，如果该功能缺失或实施不佳，以至于实际上无法使用。

Luke Wroblewski总结了RWD和移动设计中的一些挑战，并创建了多设备布局模式的目录。他建议，与简单的RWD方法相比，设备体验或RESS（带有服务器端组件的响应式Web设计）方法可以为移动设备提供更好的用户体验。诸如Sass或Incentivated的MML之类的样式表语言的服务器端“ 动态CSS ”实现可以通过访问基于服务器的API来实现，该方法结合处理设备（通常是手机）的差异设备功能数据库，以提高可用性。RESS的开发成本更高，不仅需要客户端逻辑，因此倾向于保留给预算较大的组织。与其他方法相比，Google建议对智能手机网站进行自适应设计。

尽管许多发布商开始实施响应式设计，但RWD面临的一项持续挑战是某些横幅广告和视频不够流畅。但是，搜索广告和（横幅）展示广告支持特定的设备平台定位以及台式机，智能手机和基本移动设备的不同广告尺寸格式。不同的登陆页面 URL可以用于不同的平台或Ajax可以用于在页面上显示不同的广告变体。 CSS表允许混合固定+流体布局。

现在有很多验证和测试RWD设计的方法，从移动站点验证器和移动仿真器到同时测试工具（如Adobe Edge Inspect）。Chrome，Firefox和Safari浏览器以及Chrome控制台提供了响应设计视口大小调整工具，第三方也是如此。

随着移动设备使用量的增加，RWD的用例现在将进一步扩展。Statista的数据显示，来自移动设备的美国自然搜索引擎访问量已经达到51％，并且还在不断增加。