响应式设计与自适应设计

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了响应式设计与自适应设计相关的知识,希望对你有一定的参考价值。

响应式设计与自适应设计

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

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

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

具体使用方法如下

1meta标签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-scalemaximum-scale都将忽略,用为根本不可能缩放。所有缩放的值都必须在0.01-10范围之内。

2media query(两种方式)

a:通过link标签

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

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

bCSS直接设置

@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对于那些老式浏览器(主要IE678需要使用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.524px 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 MarcotteimgSizer.js

addLoadEvent(function(){

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

imgSizer.collate(imgs);

})

 

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

两者区别与选择:

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

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

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

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


以上是关于响应式设计与自适应设计的主要内容,如果未能解决你的问题,请参考以下文章

响应式设计与自适应设计有何区别?

我应该参考哪个单位的宽度以及我应该使用啥单位进行响应式设计? (非自适应设计)

响应式设计和自适应设计区别

融合响应式设计的知识点

CSS:响应式设计——REM

响应式布局