標籤：
一、什麼是響應式布局?
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。
這個概念是為解決移動互連網瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕行動裝置的普及，用大勢所趨來形容也不為過。
隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。
二、響應式布局有哪些優點和缺點? 優點：三、響應式布局該怎麼設計?
1、 如何解決不同裝置間的相容問題？
CSS3中的Media Query（媒介查詢）可以解決這個問題。
2、media query能夠擷取哪些值?
裝置的寬和高device-width，device-heigth顯示螢幕/觸覺裝置。
渲染視窗的寬和高width，heigth顯示螢幕/觸覺裝置。
裝置的手持方向，橫向還是豎向orientation(portrait|lanscape)和印表機等。
畫面比例aspect-ratio點陣印表機等。
裝置比例device-aspect-ratio-點陣印表機等。
對象顏色或顏色列表color，color-index顯示螢幕。
裝置的解析度resolution
3、文法結構及用法
文法：@media 裝置名稱 only (選取條件) not (選取條件) and(裝置選取條件)，裝置二{sRules}
用法：
a、樣本一：在link中使用@media：
<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" />
上面使用中only可省略，限定於電腦顯示器，第一個條件max-width是指渲染介面最大寬度，第二個條件max-device-width是指裝置最大寬度。
b、在樣式表中內嵌@media：
@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px)
and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}
設定了電腦顯示器解析度（寬度）大於或等於1024px（並且最大可見寬度為989px）；屏寬在480px及其以下手持功能；屏寬在480px以及橫向（即480尺寸平行於地面）放置的手持功能；
屏寬大於或等於480px小於1024px以及 垂直放置裝置的css樣式。
四、實現響應式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 必須加這句話
width – viewport的寬度
height – viewport的高度
initial-scale – 初始的縮放比例
minimum-scale – 允許使用者縮放到的最小比例
maximum-scale – 允許使用者縮放到的最大比例
user-scalable – 使用者是否可以手動縮放
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--最後對於在IE瀏覽器中不支援media query的情況，我們可以使用Media Query JavaScript來解決，
只需要在頁面頭部引用css3-mediaqueries.js即可 -->
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<title>Document</title>
<style>
/**
設計思路很簡單，首先先定義在標準瀏覽器下的固定寬度（假如標準瀏覽器的解析度為1024px，那麼我們設定寬為980px），
然後用Media Query來監測瀏覽器的尺寸變化，當瀏覽器的解析度小於1024px的時候，
則通過Media Query預設的樣式表來將頁面的寬度設定為百分比顯示，
這樣子頁面的結構元素就會根據瀏覽器的的尺寸來進行相對應的調整。
同理，當瀏覽器的可視地區改變到某個值（假如為650px）的時候，
頁面的結構元素根據Media Query預設的層疊樣式表來進行相對應的調整。看看我們的例子：
**/
/* 當瀏覽器的可視地區小於980px */
@media 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;}
}
/** 為了更好的顯示效果，我們往往還要格式化一些CSS屬性的初始值：***/
/* 禁用iPhone中Safari的字型大小自動調整 */
html {
-webkit-text-size-adjust: none;
}
/* 設定HTML5元素為塊 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/* 設定圖片視頻等自適應調整 */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
.video embed, .video object, .video iframe {
width: 100%;
height: auto;
}
</style>
</head>
<body>
</body>
</html>
html5 響應式布局
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
