移动web之响应式布局

这个概念是为解决移动互联网浏览而诞生的。

响应式布局能够为不同终端的用户提供更加舒适的界面和更好的用户体验。并且随着眼下大屏幕移动设备的普及。用大势所趋来形容也不为过。

2.Media Rule


1)定义和用途
Media Rule是用来定义不同的媒体类型／不同设备的样式规则。

在css2中它被称为Media types,在css3中被称为Media Querys.
用途：
·浏览器的高度和宽度
·设备的高度和宽度
·设备的方向（横向／纵向）
·dpi
·and more

2)css语法
在样式表中嵌入@media
@media not|only mediatype and (media feature) { 
    CSS-Code;
}

/* 当浏览器的可视区域小于980px */
@media　[only] screen and (max-width: 980px) {
    #wrap {width: 90%; margin:0 auto;}
    #content {width: 60%;padding: 5%;}
    #sidebar {width: 30%;}
    #footer {padding: 8% 5%;margin-bottom: 10px;}
}
/* 当浏览器的可视区域小于650px */
@media screen and (max-width: 650px) {
    #header {height: auto;}
    #searchform {position: absolute;top: 5px;right: 0;}
    #content {width: auto; float: none; margin: 20px 0;}
    #sidebar {width: 100%; float: none; margin: 0;}
}
在link中使用@media
<link rel="stylesheet" media=" mediatype and|not|only ( media feature )" href=" mystylesheet.css ">

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />

3)viewport
须要在页面的head中加上viewport,这个属性是在移动设备上设置原始大小显示和是否缩放的声明。
<meta name="viewport" content="width=device-width; initial-scale=1.0;user-scalable=yes">
demo:
測试站点：http://responsivator.queenslandwebplan.com/
demo:http://2012.dconstruct.org/