經過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 是因爲谷歌瀏覽器的最小顯示是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樣式繁多 且支持觸控

後面再慢慢補充