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

首先感谢原作者：webApp赵海洋

附上文章原地址：移动前端工作的那些事---前端制作之自适应制作篇

 

    随着移动前端的手机屏幕分辨率越来越多，自适应设计制作显得越来越重要。如何自适应屏高和屏宽是每个设计和制作人员共同需要考虑的事情。设计人员需要考虑N多分辨率的情况，而制作人员则需要考虑如何自适应布局等等。

    我先从设计的角度来阐述这个问题，首先要考虑如何进行自适应设计。这个需要和制作人员进行沟通后决定，如果制作人员采用响应式布局（稍后会介绍此布局）的制作方案的话，则需要设计人员根据不同的屏宽来设计不同的效果图以便提供给制作人员进行响应式布局制作。如果制作人员采用高宽最大化（稍后会介绍此布局）来进行布局制作的话，则需要设计人员提供一个最合理的分辨率设计效果图来适应主流的所有分辨率屏幕的手机。

    一、响应式布局

   相应式布局的核心内容其实就是使用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-device
-width: 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。就可以了。

    此方法有些笨拙，但只需要做一版就可以了。相比较前者省时一些。但效果不如前者好。各有利弊需要根据实际项目而酌情选定方案。

 

首先感谢原作者：webApp赵海洋

附上文章原地址：移动前端工作的那些事---前端制作之自适应制作篇