響應式布局：**能夠相容多個終端——而不是為每個終端做乙個特定的版本。
優點：面對不同解析度裝置靈活性強
能夠快捷解決多裝置顯示適應問題
缺點：相容各種裝置工作量大，效率低下
**累贅，會出現隱藏無用的元素，載入時間加長
多方面因素影響而達不到最佳效果，一定程度上改變了**原有的布局結構，會出現使用者混淆的情況
說到響應式設計，離不開**查詢media
css3的新增內容media query（媒介查詢）：通過不同的媒介型別和條件定義樣式表規則
引數：裝置寬和高device-width，device-height顯示螢幕/觸覺裝置。
渲染視窗的寬和高width，height顯示螢幕/觸覺裝置。
裝置的手持方向，橫向還是豎向orientation（portrait|lanscape）和印表機等。
畫面比例aspect-ratio點陣印表機等。
裝置比例device-aspect-ratio-點陣印表機等。
物件顏色或顏色列表color，color-index顯示螢幕。
裝置的解析度resolution。
用法@media 裝置名 only （選取條件） not （選取條件） and（裝置選取條件），裝置二
條件必須用括號()包起來，否則無效
一、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」
/>
二、樣式表中內嵌@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)
/*電腦顯示器解析度（寬度）大於或等於1024px（並且最大可見寬度為989px）；屏寬在480px及其以下手持裝置；屏寬在480px以及橫向（即480尺寸平行於地面）放置的手持裝置；屏寬大於或等於480px小於1024px以及垂直放置裝置的css樣式。
*/
可**型別引數：
all所有裝置
文件列印或列印預覽模式
screen
用於電腦螢幕，平板電腦，智慧型手機等。
speech
應用於螢幕閱讀器等發聲裝置
邏輯關鍵字：
only
限定某種型別
and邏輯與，連線裝置與選擇條件
not排除某種裝置
*裝置列表
引數描述
aspect-ratio
定義輸出裝置中的頁面可見區域寬度與高度的比率
color
定義輸出裝置每一組彩色原件的個數。如果不是彩色裝置，則值等於0
color-index
定義在輸出裝置的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0
device-aspect-ratio
定義輸出裝置的螢幕可見寬度與高度的比率。
device-height
定義輸出裝置的螢幕可見高度。
device-width
定義輸出裝置的螢幕可見寬度。
grid
用來查詢輸出裝置是否使用柵格或點陣。
height
定義輸出裝置中的頁面可見區域高度。
max-aspect-ratio
定義輸出裝置的螢幕可見寬度與高度的最大比率。
max-color
定義輸出裝置每一組彩色原件的最大個數。
max-color-index
定義在輸出裝置的彩色查詢表中的最大條目數。
max-device-aspect-ratio
定義輸出裝置的螢幕可見寬度與高度的最大比率。
max-device-height
定義輸出裝置的螢幕可見的最大高度。
max-device-width
定義輸出裝置的螢幕最大可見寬度。
max-height
定義輸出裝置中的頁面最大可見區域高度。
max-monochrome
定義在乙個單色框架緩衝區中每畫素包含的最大單色原件個數。
max-resolution
定義裝置的最大解析度。
max-width
定義輸出裝置中的頁面最大可見區域寬度。
min-aspect-ratio
定義輸出裝置中的頁面可見區域寬度與高度的最小比率。
min-color
定義輸出裝置每一組彩色原件的最小個數。
min-color-index
定義在輸出裝置的彩色查詢表中的最小條目數。
min-device-aspect-ratio
定義輸出裝置的螢幕可見寬度與高度的最小比率。
min-device-width
定義輸出裝置的螢幕最小可見寬度。
min-device-height
定義輸出裝置的螢幕的最小可見高度。
min-height
定義輸出裝置中的頁面最小可見區域高度。
min-monochrome
定義在乙個單色框架緩衝區中每畫素包含的最小單色原件個數
min-resolution
定義裝置的最小解析度。
min-width
定義輸出裝置中的頁面最小可見區域寬度。
monochrome
定義在乙個單色框架緩衝區中每畫素包含的單色原件個數。如果不是單色裝置，則值等於0
orientation
定義輸出裝置中的頁面可見區域高度是否大於或等於寬度。
resolution
定義裝置的解析度。如：96dpi, 300dpi, 118dpcm
scan
定義電視類裝置的掃瞄工序。
width
定義輸出裝置中的頁面可見區域寬度。
通過media queries實現響應式布局設計
頭部之間加上下面這句∶
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
引數設定∶
width – viewport的寬度
height – viewport的高度
initial-scale – 初始的縮放比例
minimum-scale – 允許使用者縮放到的最小比例
maximum-scale – 允許使用者縮放到的最大比例
user-scalable – 使用者是否可以手動縮放
當瀏覽器的可視區域小於768px
/*禁用iphone中safari的字型大小自動調整
*/html @media screen and ( max-width: 768px ) }
當瀏覽器的可視區域大於等於768px
@media screen and ( min-width: 768px ) }
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...
響應式布局
首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...