02 CSS3 響應式布局

響應式布局原理

第一步：meta標籤

大多數移動瀏覽器將html頁面放大為寬的檢視(viewport)以符合螢幕解析度。你可以使用檢視的meta標籤來進行重置。下面的檢視標籤告訴瀏覽器，使用裝置的寬度作為檢視寬度並禁止初始的縮放。在標籤裡加入這個meta標籤。

第二步：html結構

由於網頁會根據螢幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素，更多都是百分比操作，這一條非常重要。

字型也不能使用絕對大小(px)，而只能使用相對大小(em)。

第三步：**查詢-media queriescss3 media query-**查詢是響應式設計的核心。它根據條件告訴瀏覽器如何為指定檢視寬度渲染頁面。

**查詢的目的在於為指定的檢視寬度指定不同的css規則，來實現不同的布局。**查詢可以寫在同乙個或者單獨的樣式表中。

ie8或者更早的瀏覽器並不支援media query。你可以使用media-queries.js或者respond.js來為ie新增media query支援。

html中的條件注釋:

優點: 面對不同解析度裝置靈活性強; 能夠快捷解決多裝置顯示適應問題; 缺點: 相容各種裝置工作量大，效率低下; **累贅，會出現隱藏無用的元素，載入時間加長; 其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果;

一定程度上改變了**原有的布局結構，會出現使用者混淆的情況;

如何實現響應式布局?

通過css3中的media query(**查詢)，對應不同螢幕大小，使用不同的樣式操作；

例如: 瀏覽器是相框，**要放到相框中，**比較大的時，**就是進行縮放操作，但整體內容也縮放了；另外，**要列印到相片紙中，再將其放入到相框中； pc端，要顯示，是直接將渲染到瀏覽器視窗中；

移動端，要顯示，不是直接渲染到瀏覽器視窗中的，而是渲染在虛擬區域中即是viewpot；(移動端比pc端多了一層viewport，即可以通過設定viewport來控制整體頁面的顯示)

- width: 設定layout viewport 的寬度，為乙個正整數，或字串"width=device-width"(裝置寬度) - initial-scale: 設定頁面的初始縮放值，為乙個數字，可以帶小數 - minimum-scale: 允許使用者的最小縮放值，為乙個數字，可以帶小數 - maximum-scale: 允許使用者的最大縮放值，為乙個數字，可以帶小數 - height: 設定layout viewport 的高度，這個屬性對我們並不重要，很少使用

- user-scalable: 否允許使用者進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許

**查詢可用於檢測很多事情:

- viewport(視窗) 的寬度與高度
- 裝置的寬度與高度
- 朝向 (智慧型手機橫屏，豎屏)
- 解析度

// 表示式根據條件是否成立返回 true 或 false @media not|only mediatype and (expressions) - not: not是用來排除掉某些特定的裝置的，比如 @media not print(非列印裝置); - only: 用來定某種特別的**型別。對於支援media queries的移動裝置來說，如果存在only關鍵字，移動裝置的web瀏覽器會忽略only關鍵字並直接根據後面的表示式應用樣式檔案。對於不支援media queries的裝置但能夠讀取media type型別的web瀏覽器，遇到only關鍵字時會忽略這個樣式檔案;

- all: 所有裝置，這個應該經常看到

- all: 用於所有多**型別裝置 - print: 用於印表機 - screen: 用於電腦螢幕，平板，智慧型手機等

- speech: 用於螢幕閱讀器

// 螢幕最小寬度是1000px
@media screen and (min-width: 1000px) 
} // 螢幕最小寬度是400px，最大是1000px
@media screen and (min-width: 400px) and (max-width: 1000px)
}

02 CSS3 響應式布局

css3響應式布局

02 css3有哪些新特性？

css 響應式布局

02 CSS3 響應式布局

css3響應式布局

02 css3有哪些新特性？

css 響應式布局

相關推薦