彩云Sky

ui设计,交互设计,用户体验,前端工程师

微信公众号:彩云译设计(caiyunyisheji)

网页响应式与网页自适应的区别

针对响应式网页设计,还有一个概念叫自适应网页设计,很多人容易混淆。所以打算好好的理清两者之间的区别。

国内一直把RWD(Responsive web design)翻译为响应式设计或自适应设计,其实翻译的中文意思已经把RWD和AWD给混淆掉了,国人应该正视这个问题,因为RWD也是有缺陷的,要根据实际情况使用这种模式。

自适应设计是响应式设计中的一个子集。

Responsive design (响应式设计):建立一个网页,通过CSS Media Queries,Content-Based Breakpoint(基于内容的断点)等技术来改变网页的大小以适应不同分辨率的屏幕。

图1,响应式网页设计


Adaptive design (自适应设计):为不同类别的设备建立不同的网页,检测到设备分辨率大小后调用相应的网页。目前AWD网页主要针对这几种分辨率(320,480,760,960,1200,1600)

图2 自适应网页设计

两者的区别比较

其实看了网上很多的资料包括外文资料,这两者之间的争议也是不断。

1、Responsive design相对来说灵活性更高,但是相应的每次的载入内容会比较多。

2、而只针对某一类或某几类分辨率设计响应网页大小Adaptive design的优势就在于减少载入的等待时间,提高网页的响应速度。

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

那么"自适应网页设计"是如何实现的呢?

 

  1. 允许网页宽度自动调整

在网页的头部加入<meta name="viewport" content="width=device-width, initial-scale=1" />

这句话的解释是:网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

     2. 尽量少使用绝对宽度

由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。

举例:不能用width:xx px,而要使用width:xx%或者width:calc(xx% + xxpx)

字体上需要使用相对尺寸大小,尺寸大小请参见我的前一篇博文:

http://huangmenglong.lofter.com/post/1dee18c9_ac6b017

    3. 流动布局

即使用浮动float来布局,而不要使用表格形式布局。

    4.根据屏幕的宽度,选择加载不同的css

代码示例:<link rel="stylesheet" type="text/css"  media="screen and (max-device-width: 800px)"  href="small.css" />

    5.除了在html头部标签加载css文件,也可以在已经有的css文件中加载代码段,

代码示例:

 @import  url("tinyScreen.css") screen and (max-device-width: 400px); 

@media  screen and (max-device-width: 400px) {

    .column {
      float: none;
      width:auto;
    }

    #sidebar {
      display:none;
    }

  } 

    6.图片的自适应

代码示例:

img { max-width: 100%;}

img { -ms-interpolation-mode: bicubic; }

如果想做的更好的话,就多做一些不同尺寸的图片资源,根据大小选择性加载。

    7.选择框架来实现(相对高效率)

比如bootstrap的栅格布局就已经把很多需要写的css自适应样式都写好了,我们只需要写好预置的css类就可以快速搭建一个响应式网页。

    8.如果在计算元素间尺寸的百分比比较困难,也可以先写出固定宽度,再根据写好的宽度来做调整,也是一种方式。


Ps:写这篇文章的想法主要是,今天在朋友圈看到大学老师发布的一个学校网页设计的比赛,比赛中的一条规则是比较严格的限制了web端和mobile端的网页作品。现在网页设计的主流应该是追求响应式网页设计,个人观点最好不严格去限制在某个设备上会比较好。

参考文章:

1、http://my.oschina.net/u/1992917/blog/383238

2、https://www.zhihu.com/question/20628050

3、https://segmentfault.com/a/1190000000355077

4、http://www.alloyteam.com/2015/04/zi-shi-ying-she-ji-yu-xiang-ying-shi-wang-ye-she-ji-qian-tan/

5、https://www.quora.com/What-is-the-difference-between-responsive-and-adaptive-design

6、http://blog.csdn.net/attilax/article/details/24854037



评论
热度 ( 6 )
  1. 逐光的少年彩云Sky 转载了此文字

© 彩云Sky | Powered by LOFTER