自适应和响应式的区别

小课堂【郑州第53期】

分享人：董瑞

1.背景介绍

最开始的电脑显示器分辨率种类不多，网页设计者都会设计固定宽度的页面。随着显示器越来越多，这种方式的页面出现了问题。于是出现了自适应布局。

再后来，Google 发布了 Android，还有 HTML5 标准的发布。手机虽然屏幕变小了，但是却提供了更丰富的功能，为了让网页适应小屏幕显示，出现了响应式布局。

2.知识剖析

什么是自适应

自适应，英文名称Adaptive Design，缩写AWD,即为不同大小的屏幕上呈现同样网页内容。

示例：携程旅行

什么是响应式

Responsive design,简称RWD

自适应暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动.

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

通俗得讲是：css根据屏幕宽度，自动调整网页div显示和布局，以适应不同尺寸屏幕优化浏览体验。 （根据屏幕宽度，自动调整布局

示例：IT修真院

自适应与响应式区别

自适应最早通过写不同分辨率的网页来实现,知道你的用户将会使用哪些设备而进行的有针对性的设计。

响应式是针对所谓普遍设备(universal)进行的页面设计，并不是针对指定的浏览设备。

RWD,一般来说在网页设计初期就开始，所以旧网站要实现RWD 很可能要完全重建。而 AWD 则采用保留现有桌面网站而对于更小的分辨率做针对性的优化（适应），这点对于很多老的网站来说很重要，因为重构成本太大。

• 
  
• 其实RWD和AWD都是响应式设计，从外观上很难分辨，但他们自己运行机理不同
• RWD是主动式的响应设计，AWD是被动式的响应式设计
• RWD不管用户使用的是什么设备都是在服务器把数据推送到浏览器后，脚本或CSS自行侦测屏幕大小后执行对应的样式表内容，并且一直通过本地脚本在监听屏幕大小的变化，随时做出样式响应的变化，所以是主动的
• AWD是用户通过浏览器发送请求后，服务器根据请求中夹带的用户设备设备信息做出判断，调用已经在服务器里准备好的，适应对应设备样式文件+HTML内容+JS，返回给浏览器以这种方式响应不同设备

3、常见问题

自适应网页设计到底是怎么做到的？在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，我们设置网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。我们还可以设置允许用户缩放到的最大（maximum-scale）和最小（minimum-scale）比例。

   meta name="viewport" content="width=device-width, initial-scale=1"                

同时，由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素，而通过百分比来设置宽度。

   width: xx%; width:auto;                

为了自适应页面的显示效果，字体尽量不使用绝对大小（px），而去使用相对大小（em）或者高清方案（rem）。

   body { 　　　　font: normal 100% Helvetica, Arial, sans-serif; 　　}    p { 　　　　font-size: 1.5em; 　　}                

   html { 　　　　font-size: 62.5%; 　　}    p { 　　　　font-size: 1rem; 　　}                

对于图片的自适应，我们一般只需要一行css代码img{max-width:100%;}就可以让图片较好地适应div或table。

媒体查询可以在同一个css文件中，根据不同的屏幕分辨率，选择应用不同的CSS规则。尽量将媒体查询的位置靠近他们相关的规则。不要放到一个独立的样式文件中,或者丢在文档的最底部。 这样做容易忘记。

媒体查询的使用

                   .element{...}                    @media screen and (min-width: 768px) {                        .element {...}                    }                

1. 
   
2. 简单总结一下就是以下七点：
3. 允许网页自适应宽度
4. 不固定宽度
5. 相对大小的字体
6. 流动布局
7. 选择加载CSS
8. CSS的@media规则
9. 图片的自适应

响应式网页设计应注意的九个规则

达到优秀效果的响应式页面设计的要求很精细，既要兼顾设计时的方便快捷，同时也要保证页面展现在受众面前的效果，并且要针对你所设计产品用户的移动端还是PC端偏重进行优化。

5.编码实战

自适应

响应式

6.扩展思考

问题一：如何更好地处理自适应和响应式的应用

       什么时候使用Responsive design或Adaptive design很大程度取决于你的开发时间和预计的开发成本。如果在开发时间较为紧张的时候，同时也希望尽可能的让网页自适应于多种设备，争取在不同类型的屏幕上都保持良好的用户体验，那么使用Adaptive design的方式也是不错的选择。

7.参考文献

参考一：响应式和自适应的区别

参考二：什么是响应式布局设计-知乎

参考三：响应式和自适应区别

参考四：响应式网站注意要点

8.更多讨论

讨论点一：自适应和响应式网页的性能优化

讨论点二：怎么实现更大分辨率的良好显示效果

PPT链接：https://ptteng.github.io/PPT/PPT/css-11-Adaptive&responsive.html#/

视频链接：https://v.qq.com/x/page/u0385mnrp4n.html