@media媒体查询构建移动设备界面

@media only screen and(max-device-width:480px){

       body{

            width:460px;

       }

       section#sidebar,section#posts{

           float:none;

           width:100%;

       }

}

 

媒体查询也可以加在关联样式表中

<link rel=”stylesheet” type=”text/css” href=”css/mobile.css” media=”only screen and （max-device-width:480px）”>

 

媒体查询在其它浏览器上的效果可以通过一个JQuery插件支持，链接：http://plugins.jquery.com/project/MediaQueries