px轉換為rem及rem移動端適配

一、Less文件生成css文件：

Easy LESS 插件

     ——在新建less文件的同時自動生成對應的css文件

友鏈：

  less官方文檔

二、rem相關運算：

px to rem &rpx(cssrem) 插件

     ——設置好默認html的font-size大小后，輸入實際的頁面元素大小，自動生成rem

1、rem計算原理

插件進行的運算：

​ 輸入實際的頁面元素大小px / 設置的默認font-size大小px = rem

例：原先盒子的寬度為 width：32px；

   如果用rem表示的話則盒子的寬度為 width：32rem / @font-size 👁‍🗨

2、關於font-size大小設置✨

一般默認把屏幕份為15等份(還可以10、20)

​ 當前設計稿尺寸大小px / @no值(即：份數) = 自定義默認的font-size大小px

①設計稿尺寸一般為750px

②淘寶的移動端適配庫flexible.js中默認 @no 為 10，即分成了10份

③cssrem插件默認的@no值為 16，即分成了16份

3、px to rem &rpx(cssrem)插件使用

只要設置好默認的font-size值，輸入的px值自動轉換為rem值

三、應用：rem適配方案

1、配合媒體查詢 + less (common.less)

自定義common.less文件，讓font-size大小為動態變化的，並達到讓它包含了幾乎所有的屏幕尺寸

common.less中最前面要聲明html的設計稿下默認的font-size大小（750/15 = 50 px）。

2、配合js適配庫(flexible.js)

flexible.js：

  下載地址https://github.com/amfe/lib-flexible

直接引用，自動識別屏幕大小，自動動態變化font-size大小

默認分為 10等份 ，即 @baseFont 大小為 750/10 = 75px;

四、相關文件代碼

1、common.less

// 設置常見的屏幕尺寸 修改里面的html文字大小
a {
    text-decoration: none;
}
// 一定要寫到最上面
html {
    font-size: 50px;
}
// 我們此次定義的划分的份數 為 15
@no: 15;

// 320
@media screen and (min-width: 320px) {
    html {
        font-size: 320px / @no;
    }
}
// 360
@media screen and (min-width: 360px) {
    html {
        font-size: 360px / @no;
    }
}
// 375 iphone 678
@media screen and (min-width: 375px) {
    html {
        font-size: 375px / @no;
    }
}

// 384
@media screen and (min-width: 384px) {
    html {
        font-size: 384px / @no;
    }
}

// 400
@media screen and (min-width: 400px) {
    html {
        font-size: 400px / @no;
    }
}
// 414
@media screen and (min-width: 414px) {
    html {
        font-size: 414px / @no;
    }
}
// 424
@media screen and (min-width: 424px) {
    html {
        font-size: 424px / @no;
    }
}

// 480
@media screen and (min-width: 480px) {
    html {
        font-size: 480px / @no;
    }
}

// 540
@media screen and (min-width: 540px) {
    html {
        font-size: 540px / @no;
    }
}
// 720
@media screen and (min-width: 720px) {
    html {
        font-size: 720px / @no;
    }
}

// 750
@media screen and (min-width: 750px) {
    html {
        font-size: 750px / @no;
    }
}

2、flexible.js

(function flexible(window, document) {
    // 獲取的html 的根元素
    var docEl = document.documentElement
        // dpr 物理像素比
    var dpr = window.devicePixelRatio || 1

    // adjust body font size  設置我們body 的字體大小
    function setBodyFontSize() {
        // 如果頁面中有body 這個元素 就設置body的字體大小
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px'
        } else {
            // 如果頁面中沒有body 這個元素，則等着 我們頁面主要的DOM元素加載完畢再去設置body
            // 的字體大小
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10    設置我們html 元素的文字大小
    function setRemUnit() {
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
    }

    setRemUnit()

    // reset rem unit on page resize  當我們頁面尺寸大小發生變化的時候，要重新設置下rem 的大小
    window.addEventListener('resize', setRemUnit)
        // pageshow 是我們重新加載頁面觸發的事件
    window.addEventListener('pageshow', function(e) {
        // e.persisted 返回的是true 就是說如果這個頁面是從緩存取過來的頁面，也需要從新計算一下rem 的大小
        if (e.persisted) {
            setRemUnit()
        }
    })

    // detect 0.5px supports  有些移動端的瀏覽器不支持0.5像素的寫法
    if (dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
    }
}(window, document))