通過rem編寫自適應移動端要點

標籤：

直接上乾貨 

1，dpr 蘋果手機像素是2 普通安卓機是1 也就是說1像素下蘋果需要的像素點是安卓機的兩倍 所以一個需要15x15顯示的映像安卓機僅需要提供15X15即可顯示清楚 蘋果手機需要要30X30  你可以採用檢測不同類型手機載入不同大小圖  為了保證像素

推薦做的時候用蘋果大圖然後在轉化為不同尺寸。

2，rem 實現方法

在頭部通過viewport 監控螢幕尺寸：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

在css中利用css3 @media 呈現在不同尺寸螢幕下font-size 從而控制頁面的等比放大

根html設定font-size 為67.5%時 時1rem 為 10px  

這裡採用的是125%即為20px 是由於Google瀏覽器的最小顯示是12px 為了方便調試並且我做完發現採用20效果還行 

我這裡做的時候是在340的基準下所以 在360的螢幕下 font-size 應該時360/340 * 125% 約= 132.3 以此類推

html

{ font-size : 125%; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; height:100%}

@media screen and (min-width: 321px) and (max-width: 360px){ html { font-size: 132.3% ; } 

@media screen and (min-width: 361px) and (max-width: 375px){ html { font-size: 137.9% ; }}

@media screen and (min-width: 376px) and (max-width: 414px){ html { font-size: 152.2% ; }}

@media screen and (min-width: 415px) and (max-width: 435px){ html { font-size: 160%; }}

@media screen and (min-width: 436px) and (max-width: 480px){ html { font-size: 176.47%; }}

@media screen and (min-width: 641px) and (max-width: 769px){ html { font-size: 250% ; }}

 

3，注意手機瀏覽器一般都有設定最小的字型顯示   打個比方就是你設定為5px 手機瀏覽器為了顯示清楚 會按照10px顯示

因為10px 是這個手機瀏覽器內建要求的最小字型 為了能顯示5px的字

這裡推薦採用css3 的scale屬性通過縮放來類比字型變小

手機端邊框也有最小顯示大小 可能你在google瀏覽器的手機類比上看著沒問題但在真實手機上會出現邊框消失現象

這裡推薦將border設定成none 採用css3 的box-shadow屬性來類比邊框 box-shadow: inset 0 0 .05rem #fff, inset 0 .05rem 0 #fff, 0 0px .05rem 0px black;//這裡是黑邊框

4，手機端不支援hover 屬性如果要類比hover效果可以採用 綁定touchstart 和 touchend 類比效果 這裡li-active是觸控後的樣式

$(‘.readboy-catalog li‘).on(‘touchstart‘,function(e) { $(this).addClass("li-active"); });

$(‘.readboy-catalog li‘).on(‘touchend‘,function(e) { $(this).removeClass("li-active"); });

5，手機端因為要求儘可能少的載入資源所以這裡不推薦使用jquery 而是更輕量級的zepto用法和jquery基本相同

6，手機端推薦的輪播外掛程式swiper樣式繁多 且支援觸控

後面再慢慢補充

 

通過rem編寫自適應移動端要點