移动年代，是任何Web规划与开发者都不能忽视的一个年代，总有一天，你规划的东西将被显现在两种屏幕上，桌面大屏幕和移动小屏幕，怎么让同一个网站一起习惯彻底不同的两种尺度的屏幕，这是一个好久以来都没有***解决方案的问题，直到有了CSS3。

51CTO引荐专题：iPhone应用程序开发初探

CSS3的Media Queries

在CSS2年代，假如你从前为你的网站规划过打印版CSS，就会理解CSS3 Media Queries的作用，不过，CSS3的Media Queries比CSS2的Media Type更有用，事实上，CSS2的Media Type并不曾被多少设备所支撑过。CSS3的Media Queries能够帮你获取以下数据：

◆浏览器窗口的宽和高

◆设备的宽和高

◆设备的手持方向，横向仍是竖向

◆分辨率

假如用户有一个支撑Media Queries的设备，咱们就能够为该设备编写专门的CSS，让网站习惯这个设备的小屏幕，英国的Web技能大会dConstruct便根据该技能推出他们的2010年大会网站，手机也能够轻松拜访，以下是该网站的桌面版和手机版截图：

这个网站在不同尺度的设备上按不同的布局显现，而且，手机版在iPhone，Opera Mini，Android等设备上有彻底共同的体现。

#p#

运用Media Queries为手机创立独自的CSS

咱们举一个简略的两栏式结构的比如。

为了让这个布局更好地在手机上显现，咱们为手机版规划一个一栏式布局，且缩小 header 部分的图片巨细。运用Media Queries最直接的办法是，在你的 CSS 代码中，加一段独立代码分支，如下：

@mediaonlyscreenand(max-device-width:480px){ 
} 
@mediaonlyscreenand(max-device-width:480px){ 
} 

接着，在这个分支中，为小屏幕编写独立的CSS界说，这些界说能够掩盖桌面版CSS中的相应界说（只要将这段分支代码放在后边），以下针对小屏幕的CSS将布局变成一栏式，且运用了小尺度的Header图片：

@mediaonlyscreenand(max-device-width:480px){ 
div#wrapper{ 
width:400px; 
} 
div#header{ 
background-image:url(media-queries-phone.jpg); 
height:93px; 
position:relative; 
} 
div#headerh1{ 
font-size:140%; 
} 
#content{ 
float:none; 
width:100%; 
} 
#navigation{ 
float:none; 
width:auto; 
} 
} 
@mediaonlyscreenand(max-device-width:480px){ 
div#wrapper{ 
width:400px; 
} 
div#header{ 
background-image:url(media-queries-phone.jpg); 
height:93px; 
position:relative; 
} 
div#headerh1{ 
font-size:140%; 
} 
#content{ 
float:none; 
width:100%; 
} 
#navigation{ 
float:none; 
width:auto; 
} 
}

终究，咱们在小屏幕设备上得到了如下显现作用：

#p#

运用Media Queries链接独自的CSS文件

关于小型的改动，直接在 CSS 代码中刺进移动设备代码分支是很便利的，但关于大型站点，能够运用 Media Queries 链接独立的款式表文件，以便在独立的款式表文件中彻底自由地为小设备编写 CSS 代码，办法如下：

<linkrel="stylesheet"type="text/css"media="onlyscreenand(max-device-width:480px)"href="small-device.css" />
<linkrel="stylesheet"type="text/css"media="onlyscreenand(max-device-width:480px)"href="small-device.css" />

测验Media Queries

要在不同设备上测验Media Queries并非易事，你要有各种设备，还要将代码上传到某个主机进行拜访测验。这里有一个在线服务，ProtoFluid， 该服务答应你供给你要测验的网站的URL，或许你本机上的URL，然后，模仿iPhone等移动设备显现你的规划，下图是上文中说到的dConstruct网站在ProtoFluid的iPhone模仿中显现的姿态。你也能够填写你自己的窗口尺度，来模仿特定的设备。

在ProtoFluid运用Media Queries，你需求一起加上max-width和max-device-width特点，这意味着，Media Queires 不只能够针对不同的移动设备，还能够针对桌面体系中某些人为的小窗口景象。

@mediaonlyscreenand(max-width:480px),onlyscreenand(max-device-width:480px){ 
} 
@mediaonlyscreenand(max-width:480px),onlyscreenand(max-device-width:480px){ 
} 

运用上面的代码，在桌面浏览器上，当你改动窗口尺度抵达480像素的时分，就会看到布局的改动。需求留意的是，上面的max-width部分只是为了测验，假如你不期望用户在桌面浏览器中由于改动了窗口巨细而导致你的布局改动，能够去掉max-width部分，而只针对那些移动设备。

对现有网站的整改

上面的比如为了阐明问题起见都很简略，实践中的站点不可能这样，下面的比如，作者将运用他自己的公司网站，阐明怎么运用 Media Queries 对现有网站进行移动化整改。

桌面布局

作者自己的网站是几年前规划的，那是还没有考虑 Media Queries 问题，这是一个三栏式布局。

增加新的款式表

为了习惯移动设备，将运用Media Queries加载独立的款式表：

<link 
rel="stylesheet" 
type="text/css" 
media="onlyscreenand(max-width:480px),onlyscreenand(max-device-width:480px)" 
href="/assets/css/small-device.css" 
 />
<link 
rel="stylesheet" 
type="text/css" 
media="onlyscreenand(max-width:480px),onlyscreenand(max-device-width:480px)" 
href="/assets/css/small-device.css" 
 />

作者的做法是，将他站点中本来的CSS文件另存为small-device.css ，在这个基础上针对移动设备进行整改。

#p#

紧缩Header部分

***步是让Logo部分能在小屏幕上显现，由于这个Logo是根据背景图片的，因而很好办，一起，供给一个小尺度的背景图，以便和Logo调配。

body{ 
background-image:url(/img/small-bg.png); 
} 
#wrapper{ 
width:auto; 
margin:auto; 
text-align:left; 
background-image:url(/img/small-logo.png); 
background-position:left5px; 
background-repeat:no-repeat; 
min-height:400px; 
} 
body{ 
background-image:url(/img/small-bg.png); 
} 
#wrapper{ 
width:auto; 
margin:auto; 
text-align:left; 
background-image:url(/img/small-logo.png); 
background-position:left5px; 
background-repeat:no-repeat; 
min-height:400px; 
}

单列式布局

下一步首要的作业是将多栏式布局换成单栏式，桌面版运用Float完成多栏布局，要改成单栏，只需将float设置为float:none，并将width设置为width:auto，这样，就完成了单列式布局。

.article#aside{ 
float:none; 
width:auto; 
} 
.article#aside{ 
float:none; 
width:auto; 
}

再紧凑一些

然后，将margin和padding进行调整，使之更紧凑一些：

在iPhone中测验

在iPhone中实践测验的时分，发现网站在单列式布局中依然向外延伸了，从 Safari developer website 找到解决办法，在网站头，增加一个 meta tag，将网站的视窗宽度设置成何设备共同。

<metaname="viewport"content="width=device-width" />
<metaname="viewport"content="width=device-width" />

【修改引荐】

1. AndroidWidget开发详解
2. 一步一步揭开Android应用程序的奥秘面纱
3. Novell推出支撑iPhone的.NET和C#开发工具