响应式设计与自适应设计

Posted 2020-08-11

响应式设计与自适应设计

相信从事前端页面设计的人都知道，页面呈现的效果及用户体验是非常重要的。当今社会移动设备的使用已超过了pc端，面对不同分辨率的设备，怎样做到页面体验的效果一样呢？这就成了最头疼的事情。

下面我们来看看响应式设计与自适应设计两者用法：

响应式Web设计(Responsive Web Design) ：主要利用CSS3的媒介查询（Media Query）和Viewport来解决问题。通过媒介查询的设置，根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。

具体使用方法如下：

1、meta标签的viewport属性

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0”/>

视窗宽度width=device-width为设备宽度

视窗缩放initial-scale=1为不可缩放状态   maximum-scale=1为不可放大

user-scalable=0 是否允许用户调整缩放，如果设置为yes则允许用户对其改变，反之则为no，如果设置为no，那么minimum-scale和maximum-scale都将被忽略，用为根本不可能缩放。所有缩放的值都必须在0.01-10的范围之内。

2、media query（两种方式）

a：通过link标签

<link rel=”stylesheet” type=”text/css” media=”screen and(max-width: 600px)” href=”style1.css”/>

示例代码代表当前屏幕宽度小于600px的时候，加载style1.css文件来渲染页面。

b：CSS中直接设置

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

/* 具体的CSS属性设置 */

}

从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内。only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了CSS基本语法。

3、优点

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

4、缺点

兼容各种设备工作量大，效率低下

代码累赘会出现隐藏无用的元素，加载时间加长

一定程度上改变了网站原有的布局结构，会出现用户混淆的结果

 

自适应网页设计（Adaptive Web Design）：指能使网页自适应显示在不同大小终端设备上新网页设计及技术。

主要注意的问题如下：

1、首先在网页代码头部，加入一行viewport元标签

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0”/>

所有主流浏览器都支持这个设置，包括IE9，对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js

<!—[if lt IE 9]>

<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>

<![endif]-->

2、不使用绝对宽度，由于网页会根据屏幕宽度调整布局，不能使用width: xxx px具体的像素值，使用百分比width:xxx %或者width:auto

3、相对大小的字体，字体也不能使用绝对大小（px），而只能使用相对大小（em）设置body字体为100%，即字体大小是页面默认大小的100%，也是16px。例如：p{ font-size: 1.5em; }，即p的大小是默认大小的1.5倍（24px（ 24/16=1.5 ））。

4、流动布局：各个区块的位置都是浮动的，不是固定不变的。

.left {

float: left;

width: 20%;

}

.right {

float: right;

width: 75%;

}

Float的好处是，如果宽度太小放不下两个元素，后面的元素会自动滚到前面元素的下方，不会再水平方向溢出，避免了水平滚动条的出现。注：绝对定位（position: absolute）的使用，也要非常小心。

5、图片的自适应

img { max-width: 100%; height: auto }

这行代码对于大多数嵌入网页的视频也有效果，所以可以写成：

img object { max-width: 100%; height:auto}

老版本的Ie不支持max-width，所以只好写成：

img { width: 100%; height:auto}

此外，windows平台缩放图片时，可能出现图像失真现象，这时可以尝试使用IE的专有命令：

Img { -ms-interpolation-mode: bicubic }

或者Ethan Marcotte的imgSizer.js

addLoadEvent(function(){

var imgs = document.getElementById(“content”).getElementsByTagName(“img”);

imgSizer.collate(imgs);

})

 

注：自适应网页设计的核心，就是CSS3引入的Media Query模块，与响应式布局设计的使用一样。

两者区别与选择：

理论上说，响应式布局在任何情况下都比自适应布局好一些，但在某些情况下自适应布局更切实际。

 自适应布局可以让你的设计更加可控，因为你只需要考虑了了几种状态就万事大吉了。但在响应式布局中你可能需要面对非常多状态——是的，大部分状态之间的区别很小，但它们又的确是不同的——这样一来就很难确切搞清你的设计会是什么样。同时这也带来了测试上的难题，你很难有绝对的把握预测到它会怎样。换个角度说，这也是响应式布局的魅力所在。通过允许表面上的不确定因素存在，你可以获得更高层次上的确定。虽然你无法在精确到像素级别准确预知你的设计如何在943px×684px视觉区域汇中展示，但你能确定的是它们一定能展示的很好——不管是表层特征还是布局结构都有条不紊。

     自适应布局有它自己的优势，因为它们实施起来代价更低，测试更容易，这往往让他们成为更切实际的解决方案。自适应布局可以看做响应式布局的“穷兄弟”，在资源有限的情况下就可以让它出马。特别是改进现有网站的时候尤其奏效，因为全部重写代码在这时并不可行。这种案例中，采用自适应布局是一个不错的出发点。

其实无论是哪种设计理念都是各有优缺的，还是要从个人实际去求出发去选择！