移動web之響應式布局

標籤：好的   用途   並且   article   行動裝置   不為   width   float   auto   

1.響應式布局的概念


響應式布局是Ethan Marcotte在2010年5月份提出的一個概念。簡而言之。就是一個網站可以相容多個終端——而不是為每一個終端做一個特定的版本號碼。

這個概念是為解決移動互連網瀏覽而誕生的。

響應式布局能夠為不同終端的使用者提供更加舒適的介面和更好的使用者體驗。並且隨著眼下大螢幕行動裝置的普及。用大勢所趨來形容也不為過。

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/

移動web之響應式布局