一、响应式布局
相应式布局的核心内容其实就是使用CSS3引入的Media
Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
<link
rel=”stylesheet” type=”text/css”media=”screen and
(max-device- 400px)”
href=”tinyScreen.css” />
上面的代码意思是，如果屏幕宽度小于400像素（max-device-
400px），就加载tinyScreen.css文件。
<P><link
rel=”stylesheet” type=”text/css”media=”screen and (min-
400px) and
(max-device</P>
<P>-
600px)”href=”smallScreen.css”
/></P>
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
@import url(“tinyScreen.css”)
screen and (max-device- 400px);
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
<P>@media
screen and (max-device- 400px)
{</P>
<P>.column
{
<WBR>
<WBR> float:
none;
<WBR>
<WBR> auto;
}</P>
<P>#sidebar
{
<WBR>
<WBR>
display:none;
}</P>
<P>}</P>
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（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。就可以了。
此方法有些笨拙，但只需要做一版就可以了。相比较前者省时一些。但效果不如前者好。各有利弊需要根据实际项目而酌情选定方案。
此方法有些笨拙，但只需要做一版就可以了。相比较前者省时一些。但效果不如前者好。各有利弊需要根据实际项目而酌情选定方案。