簡談工作中 使用的的兩種常見的rem布局方案
方案1：采用媒體查詢售葡，缺點：只能適配主流機型看杭，不夠全面
在base.css文件中設(shè)置媒體查詢，對于不同的設(shè)備寬度挟伙，給根元素即htm設(shè)置不同的大小
@media screen and (max-width: 1440px) { html {font-size: 150px !important;} }
@media screen and (max-width: 1080px) { html {font-size: 150px !important;} }
@media screen and (max-width: 1024px) { html {font-size: 142px !important;} }
@media screen and (max-width: 980px) { html {font-size: 136px !important;} }
@media screen and (max-width: 750px) { html {font-size: 104px !important;}}
@media screen and (max-width: 720px) { html {font-size: 100px !important;} }
@media screen and (max-width: 640px) { html {font-size: 88.88px !important;} }
@media screen and (max-width: 540px) { html {font-size: 75px !important;} }
@media screen and (max-width: 480px) { html {font-size: 66.66px !important;} }
@media screen and (max-width: 432px) { html {font-size: 60px !important;} }
@media screen and (max-width: 414px) { html {font-size: 57.5px !important;} }
@media screen and (max-width: 400px) { html {font-size: 55.55px !important;} }
@media screen and (max-width: 393px) { html {font-size: 54.5px !important;} }
@media screen and (max-width: 375px) {html {font-size: 52.08px !important;}}
@media screen and (max-width: 360px) { html {font-size: 50px !important;} }
@media screen and (max-width: 320px) { html {font-size: 44.44px !important;} }
@media screen and (max-width: 240px) { html {font-size: 33.33px !important;} }
方案2：動態(tài)計算根元素的大小泊窘，比較精準，
(function () {
window.onresize = function(params) {
var html = document.querySelector("html");
var rem = html.offsetWidth / 7.5; //分母為7.5表示以750px的設(shè)計稿為準像寒，方便計算，亦可自定
html.style.fontSize = rem + "px";
};
window.onresize();
})();