### 1、響應式布局 **類型一：** 響應式布局，根據不同的屏幕分辨率，顯示不同的布局。 *****  主要實現，在 head標簽中加入meta標簽，使得移動端瀏覽器將HTML頁面放大寬度為試圖viewport符合屏幕分辨率： ``` <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> // user-scalable = no 屬性能夠解決 iPad 切換橫屏之后觸摸才能回到具體尺寸的問題 ``` 通過媒介查詢 根據不同的屏幕尺寸設置不同的樣式 ``` @media screen and (max-width: 980px) { .header { // ... } } /** iPad **/ @media only screen and (min-width: 768px) and (max-width: 1024px) { .header { // ... } } /** iPhone **/ @media only screen and (min-width: 320px) and (max-width: 767px) { .header { // ... } } ``` **注意：** 圖片處理 ***** 處理方式一：可以采取百分比，缺點是圖片可能放大或者縮小。可以嘗試給圖片設置最大寬度為百分比，這樣圖片過大，則縮小；圖片小的，則原樣顯示 ``` img { width: auto; max-width: 100%; } ``` 處理方式二：用`::before`和`::after`偽元素 +content 屬性來動態顯示一些內容或者做其它事情，在 CSS3 中，任何元素都可以使用 content 屬性了，這個方法就是結合 css3 的 attr 屬性和 HTML 自定義屬性的功能： ``` <img src="image.jpg" data-src-320px="image-320px.jpg" data-src-600px="image-600px.jpg" alt=""> ``` ``` @media (min-device-width:320px) { img[data-src-320px] { content: attr(data-src-320px, url); // url：地址 } } @media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); } } ``` **類型二：** 位置不變，隨著窗口尺寸大小縮放達到效果，通過em，rem，rpx，upx，vh，vw，%等（相對）單位（配合）實現 *****  **rem計算：** ***** 瀏覽器默認`html`的默認`font-size:16px;`，這個不方便和實際設計稿尺寸換算。 在說明之前，首先知道：`html`標簽的`font-size`決定`1rem`等于多少`px`，如：`html font-size:100px;`則`1rem===100px`； 那么設計圖上的實際尺寸轉換成`rem`：實際換算后的尺寸 (`60px / 100`) = `0.6rem`。 計算`fontSize` = 屏幕寬度(375px) / 設計稿寬度(375px)，則`font-size: 1px;`。 等等，會不會有什么問題呢？**當瀏覽器的px小于12px時，不生效**，如何解決，我們把它擴大100倍：`fontSize` = ( 屏幕寬度(375px) / 設計稿寬度(375px) ) * 100，則根元素`html font-size: 100px;`，那么`1rem===100px`。 計算公式：實際rem = ( 元素實際px / 100 ) * （ 屏幕px / 設計稿px ） 具體實現：http://www.hmoore.net/vvmily_king/vvmily/2331775 *****  :-: 圖一：實際設計稿尺寸750px *****  :-: 圖二：實際設計稿尺寸375px ### 2、流式布局