一、响应式布局
相应式布局的核心内容其实就是使用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文件。
<P><link
rel=”stylesheet” type=”text/css”media=”screen and (min-width:
400px) and
(max-device</P>
<P>-width:
600px)”href=”smallScreen.css”
/></P>
如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。
除了用html标签加载CSS文件,还可以在现有CSS文件中加载。
@import url(“tinyScreen.css”)
screen and (max-device-width: 400px);
同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。
<P>@media
screen and (max-device-width: 400px)
{</P>
<P>.column
{
<WBR>
<WBR> float:
none;
<WBR>
<WBR> width:auto;
}</P>
<P>#sidebar
{
<WBR>
<WBR>
display:none;
}</P>
<P>}</P>
上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。
以上所述就是响应式布局,主要就是根据不同的分辨率而采用不同的设计风格。利用加载不同的CSS文件而达到这种自适 应的制作。这种方法比较布局灵活,一般应用在手机横屏和竖屏浏览模式中。根据不同的浏览方式而获得到不同的布局方式。缺点是,设计成本和制作成本都较高, 需要做不同的设计模版和页面模版,花费的时间较长。
以上所述就是响应式布局,主要就是根据不同的分辨率而采用不同的设计风格。利用加载不同的CSS文件而达到这种自适 应的制作。这种方法比较布局灵活,一般应用在手机横屏和竖屏浏览模式中。根据不同的浏览方式而获得到不同的布局方式。缺点是,设计成本和制作成本都较高, 需要做不同的设计模版和页面模版,花费的时间较长。
二、高宽最大化
所谓的高宽最大化是我自定义的名称,其意思是说,只设计一个模版,这个模版无论是从宽度上还是高度上,都做成最大比例的设计图,例如:IOS的 iphone系列它们的显示比例宽高之比为:2:3。iphone5显示比例约小些。而安卓系列品牌较杂,不同品牌不同的分辨率,即使同一品牌不同型号也 有不同分辨率的。这个很纠结。
但大体上可以分为。2:3、3:4、3:5这三种比值。所以,为了兼容所有的浏览器,在设计图的时候要采用比值最小的为基本蓝图。即3:5的比例,也就是说以高度最高的为基本蓝图。为什么要这么做?以下来解释:
这里需要用到CSS3的几个重要属性即:
所谓的高宽最大化是我自定义的名称,其意思是说,只设计一个模版,这个模版无论是从宽度上还是高度上,都做成最大比例的设计图,例如: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。就可以了。
此方法有些笨拙,但只需要做一版就可以了。相比较前者省时一些。但效果不如前者好。各有利弊需要根据实际项目而酌情选定方案。
此方法有些笨拙,但只需要做一版就可以了。相比较前者省时一些。但效果不如前者好。各有利弊需要根据实际项目而酌情选定方案。