响应式设计与自适应设计

    xiaoxiao2024-03-10  149

    响应式设计与自适应设计

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

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

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

    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对于那些老式浏览器(主要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 MarcotteimgSizer.js

    addLoadEvent(function(){

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

    imgSizer.collate(imgs);

    })

     

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

    两者区别与选择:

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

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

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

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

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)