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

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

href=”tinyScreen.css” />
上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

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

转载于:https://www.cnblogs.com/liuu/archive/2013/04/01/2992846.html

你可能感兴趣的:(移动前端工作的那些事---前端制作之自适应制作篇)