移动前端工作的那些事---前端制作之自适应制作篇 [转]

 

  一、响应式布局
   相应式布局的核心内容其实就是使用CSS3引入的Media Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

 

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

 

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

 

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

 

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

 

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

 

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

 

@media screen and (max-device-width: 400px) {
.column {
   float: none;
   width:auto;
}
#sidebar {
   display:none;
}
}

 

上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。

     以上所述就是响应式布局，主要就是根据不同的分辨率而采用不同的设计风格。利用加载不同的CSS文件而达到这种自适应的制作。这种方法比较布局灵 活，一般应用在手机横屏和竖屏浏览模式中。根据不同的浏览方式而获得到不同的布局方式。缺点是，设计成本和制作成本都较高，需要做不同的设计模版和页面模 版，花费的时间较长。

   二、高宽最大化
    所谓的高宽最大化是我自定义的名称，其意思是说，只设计一个模版，这个模版无论是从宽度上还是高度上，都做成最大比例的设计图，例如：IOS的 iphone系列它们的显示比例宽高之比为：2:3。iphone5显示比例约小些。而安卓系列品牌较杂，不同品牌不同的分辨率，即使同一品牌不同型号也 有不同分辨率的。这个很纠结。
但大体上可以分为。2:3、3:4、3:5这三种比值。所以，为了兼容所有的浏览器，在设计图的时候要采用比值最小的为基本蓝图。即3:5的比例，也就是说以高度最高的为基本蓝图。为什么要这么做？以下来解释：

   这里需要用到CSS3的几个重要属性即：

 

-webkit-background-size:100% 100%;

 

此属性为背景尺寸自动100%进行平铺和拉伸，我们可以使用这个尺寸来进行设置。第一个100%为X轴，第二个100%为Y轴。我们可以把Y轴的比例设置 成auto。同时配合background-position属性来使用就可以达到自适应目的。如果我们想取图的上半部分则可以设置 background-position：top;即可。这样当设计图做成3:5的分辨率时就会可以适应所有手机浏览器，3:5的手机自然是全屏。而 2:3或是3:4的手机浏览器有了以上两种CSS样式控制就可以做到宽度全屏。而高度则根据background-position：top;取图的上半 部分从而也是全屏（只是高度从上往下取到4，而未到5）。举个实际像素大家就明白了。比如一张效果图是320*516像素的。3:5高度的就是 320*516，而2:3比例的则取图的320*480部分。下面的高度36像素就不取了。用这种方法达到全屏自动适应的目的。而内容部分高度和宽度都使 用100%或是auto来进行设置即可。字体样式则采用em而非px。就可以了。
    此方法有些笨拙，但只需要做一版就可以了。相比较前者省时一些。但效果不如前者好。各有利弊需要根据实际项目而酌情选定方案。

 

原文链接 http://www.w3cfuns.com/thread-5596152-1-1.html