案例單擊我

上一篇文章我寫了，關於移動端適配問題，傳送門開，這一次也關於移動端適配問題，這個方式比較常用。我經常在公司得專案中使用

直接貼上適配程式碼：

/*
 * @Author: a
 * @Date:   2017-03-11 15:08:34
 * @Last Modified by:   a
 * @Last Modified time: 2017-03-11 15:08:59
 */

'use strict';
(function(doc, win) {
    var docEl = doc.documentElement, // 獲取html物件
        resizeEvt = 'orientationchange'
 
 in window ? 'orientationchange' : 'resize', // 橫屏是否支援，不支援則為瀏覽器大小改變

        // 計算頁面字型大小
        recalc = function() {
            // 獲取頁面寬度
            var clientWidth = docEl.clientWidth;
            // 獲取不到頁面寬度，直接返回
            if (!clientWidth) return;
            // 設定html字型大小(瀏覽器預設字型大小為16px)
            docEl.
 
style.fontSize = clientWidth / 375 * 16 + "px";
        };
    // 不支援addEventListener,返回
    if (!doc.addEventListener) return;
    // 監聽事件，獲取當前html標籤的字型大小
    win.addEventListener(resizeEvt, recalc, false);
    // dom內容加在完成事件
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window)
 
;

看看上面得程式碼和我上一次貼上的程式碼是不是很少了，所以推薦上面得使用。

使用方式

這裡本人設計圖是750 得，那麼我設定得基礎螢幕375得適配。轉換：32px 等於 1rem 這就是公式，那麼我設計圖120px得轉換rem為3.75rem即可,計算為：120/32=3.75rem

注意

1. 手機上面是不能看到1px轉換後得rem大小，那麼怎麼辦了？有關解決與設計圖設計一樣，開啟傳送門
2. 記住加上meta縮放顯示那些東西

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

3. 設計師設計一個750的圖就可以了，不用設計多個解析度的，咱們前端使用這個給他適配即可
4. 優化css和圖片（這個一點我很難做到，老闆覺得我們前端寫個頁面而已，簡單，要速度即可，先給我10分鐘，去把血給吐下）