css img 適配尺寸 複習之移動端適配方法

適配概念：

在不同尺寸的手機裝置上，頁面相對性的達到合理的展示（自適應）或者保持統一效果的等比縮放（看起來差不多）。

適配的元素：（有尺寸的地方都考慮一下適配）

字型、寬高、間距、影象（圖示、）

適配的方法：

1. 百分比適配

2. viewport縮放適配

3. dpr縮放適配

4. rem適配 （目前比較主流）

5. vw、vh適配

> 核心：根據父級算百分比，需配合其他布局使用（一般配合flex盒子使用）。

一般較常使用在，高度不變，寬度在變的布局。

核心是：把所有機型的css畫素設定成一致的。

1. viewport 需要通過js動態的設定（不能直接把device的值設定成數值）。

2. 通過設定比例（初始比例以及縮放比例），把寬度縮放成一致的。

公式：縮放比 = css畫素(當前值) / 375(目標值)

獲取css畫素的方法有（前提條件 viewport 沒有縮放）：var curwidth = document.documentelement.clientwidth;var curwidth = window.innerwidth;var curwidth = window.screen.width;

(function () )();

核心是：把css畫素縮放成與裝置畫素一樣大的尺寸（css畫素 ：裝置畫素 = 1 : 1）。

原理是：根據dpr的值，把視口進行縮放，縮放到物理畫素，也就是把css畫素的值設定成物理畫素，讓所有的裝置都變成乙個css畫素對應乙個裝置畫素。

獲取dpr的方法：window.devicepixelratio

(function () else

})();

核心是：把所有的裝置都分成相同的若干份，再計算元素寬度所佔的份數。

em: 作為font-size的單位時，其代表父元素的字型大小，作為其他屬性單位時，代表自身字型大小。（font-size：m px; ---》 1em = m px）

1、chrome下有最小字型限制，必須為12px，所以這個值不能小於12。

2、如果兩個一樣的元素，但是裡面字型不一樣，那就不能統一設定了。或者元素字型變化了，就又要統一設定一遍。

2. 元素在設計稿裡的寬度（量出來的）。

3. 列數（隨便給的） 100

4. 一列的寬度（算出來的） = 螢幕實際的寬度（css畫素） / 100

一列的寬度就是乙個rem。

5. 元素實際佔的列數（算出來的） = 元素在設計稿裡的寬度 / 一列的寬度 。

width: 10rem;(實際切圖時給的值) ===》 元素適配的寬度 width, 一列的寬度 rem, 元素實際佔的列數 10。 元素適配的寬度（算出來的） = （ 螢幕實際的寬度（css畫素） / 100 ） * 元素實際佔的列數。

html。

第二種方法：能伸能縮

ios9 不支援es6。

html 

body 
@media screen and (min-width: 320px) 
body 
}@media screen and (min-width: 360px) 
body 
}@media screen and (min-width: 375px) 
body 
}@media screen and (min-width: 384px) 
body 
}@media screen and (min-width: 400px) 
body 
}@media screen and (min-width: 414px) 
body 
}@media screen and (min-width: 424px) 
body 
}@media screen and (min-width: 480px) 
body 
}@media screen and (min-width: 540px) 
body 
}@media screen and (min-width: 720px) 
body 
}@media screen and (min-width: 750px) 
body 
}

375 / 100 = 3.75px; 1vw = 3.75px; (100 * (clientwidth / designwidth) + 'px') / 1vw = 13.33333333333 vw;

支援情況： >= ios8 , >= android 4.4 。

方案一：通篇使用vw。

方案二：通過vw設定根節點字型大小，頁面尺寸依然使用rem。（用的較多）

(可伸縮布局方案)

> 原理：dpr縮放適配 + rem 適配。

別人寫的乙個適配方法。

外掛程式：sass, easy scss(把scss轉成css檔案)。預處理器：less sass（把px轉成rem）。

- css要怎麼寫？

1. @import '/path/to/px2rem.scss';

2. $designwidth : 750; //如設計圖是750

3. css要寫在scss檔案裡面

> 能解決1px問題。

> 和rem的區別：viewport 的值不一樣。

移動端頁面尺寸適配

以iphone6設計圖為基準 做法一 html head title title meta charset utf 8 meta name viewport content width device width,initial scale 1,maximum scale 1,user scalabl...

關於移動端的尺寸適配問題（rem）

近期在做移動端的專案，用到rem的相關知識。先上 css media screen and width 320px media screen and width 360px media screen and width 375px media screen and width 414px media...

移動app開發中多種裝置尺寸適配問題

1 選擇一種尺寸作為設計和開發基準 2 定義一套適配規則，自動適配剩下兩種尺寸 3 特殊適配效果給出設計效果。第一步，視覺設計階段，設計師按寬度750px iphone 6 做設計稿，除外所有設計元素用向量路徑來做。設計定稿後在750px的設計稿上做標註，輸出標註圖。同時等比放大1.5倍生成寬度11...