通過媒體查詢meta和JS轉(zhuǎn)換REM單位實現(xiàn)100%自適應(yīng)

    移動端頁面設(shè)置根節(jié)點（html）font-size大小轉(zhuǎn)換REM單位實現(xiàn)100%自適應(yīng)，通過媒體查詢meta和JS兩種方法實現(xiàn)

第一種方法

媒體查詢 meta - REM單位字體設(shè)置

/* 媒體查詢 - 字體設(shè)置 */
/* 平滑過渡 */
html{ -webkit-transition: font-size .2s ease-out; transition: font-size .2s ease-out; }
/* 設(shè)計稿寬度=640時, 4rem=400px, 1rem=100px, .5rem = 50px, .1rem = 10px 以此類推 */
@media screen and (max-width: 1280px) {
	html{ font-size: 200px; }
}
@media screen and (max-width: 1200px) {
	html{ font-size: 187.5px; }
}
@media screen and (max-width: 1120px) {
	html{ font-size: 175px; }
}
@media screen and (max-width: 1080px) {
	html{ font-size: 168.75px; }
}
@media screen and (max-width: 960px) {
	html{ font-size: 150px; }
}
@media screen and (max-width: 880px) {
	html{ font-size: 137.5px; }
}
@media screen and (max-width: 840px) {
	html{ font-size: 131.25px; }
}
@media screen and (max-width: 800px) {
	html{ font-size: 125px; }
}
@media screen and (max-width: 720px) {
	html{ font-size: 112.5px; }
}
@media screen and (max-width: 640px) {
	html{ font-size: 100px; }
}
@media screen and (max-width: 600px) {
	html{ font-size: 93.75px; }
}
@media screen and (max-width: 560px) {
	html{ font-size: 87.5px; }
}
@media screen and (max-width: 480px) {
	html{ font-size: 75px; }
}
@media screen and (max-width: 400px) {
	html{ font-size: 62.5px; -webkit-transition: none; }
}
@media screen and (max-width: 360px) {
	html{ font-size: 56.25px; }
}
@media screen and (max-width: 320px) {
	html{ font-size: 50px; }
}

/* 設(shè)計稿寬度=640時, 4rem=400px, 1rem=100px, .5rem = 50px, .1rem = 10px 以此類推 */

@media screen and (max-width: 640px) {

html{ font-size: 100px; }

}

100px*0.01 = 1rem

示例：

img{width:40px, height:35px}

轉(zhuǎn)換rem 40px*0.01 = 0.04rem, 35px*0.01 = 0.035rem

img{width:0.01rem, height:0.035rem}

@media screen and (max-width: 640px) {

html{ font-size: 40px; }

}

40px*0.025 = 1rem

示例：

img{width:40px, height:35px}

轉(zhuǎn)換rem 40px*0.025 = 1rem, 35px*0.025 = 0.875rem

img{width:1rem, height:0.875rem}

@media screen and (max-width: 640px) {

html{ font-size: 20px; }

}

20px*0.05 = 1rem

示例：

img{width:40px, height:35px}

轉(zhuǎn)換rem 40px*0.05 = 2rem, 35px*0.05 = 1.75rem

img{width:2rem, height:1.75rem}

第二種方法

JS根據(jù)設(shè)備寬度設(shè)置根節(jié)點（html）font-size字體大小

(function () {

    document.addEventListener('DOMContentLoaded', function () {

var deviceWidth = document.documentElement.clientWidth;

document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

    }, false);

window.onresize = function(){

var deviceWidth = document.documentElement.clientWidth;

document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

};

})();