data plan 不同 解決 css sea styles struct ebp

1.響應式布局的概念


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

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

響應式布局能夠為不同終端的用戶提供更加舒適的界面和更好的用戶體驗。並且隨著眼下大屏幕移動設備的普及。用大勢所趨來形容也不為過。

2.Media Rule


1)定義和用途
Media Rule是用來定義不同的媒體類型／不同設備的樣式規則。

在css2中它被稱為Media types,在css3中被稱為Media Querys.
用途：
·瀏覽器的高度和寬度

·設備的高度和寬度
·設備的方向（橫向／縱向）
·dpi
·and more

2)css語法
[email protected]
@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;}
}
[email protected]
<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之響應式布局