移動端rem配置(js動態改變和css @media配置)
阿新 • • 發佈:2018-12-23
一:js動態改變rem
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if(!clientWidth) return; if(clientWidth >= 375) { docEl.style.fontSize = '100px'; } else { docEl.style.fontSize = 100 * (clientWidth / 375) + 'px'; } }; if(!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
二:css @media配置rem
html{font-size:16px;} @media screen and (min-width:375px){html{/* iPhone6的375px尺寸作為16px基準,414px正好18px大小,600 20px */font-size:calc(100% + 2 * (100vw - 375px) / 39);font-size:calc(16px + 2 * (100vw - 375px) / 39);}} @media screen and (min-width:414px){html{/* 414px-1000px每100畫素寬字型增加1px(18px-22px) */font-size:calc(112.5% + 4 * (100vw - 414px) / 586);font-size:calc(18px + 4 * (100vw - 414px) / 586);}} @media screen and (min-width:600px){html{/* 600px-1000px每100畫素寬字型增加1px(20px-24px) */font-size:calc(125% + 4 * (100vw - 600px) / 400);font-size:calc(20px + 4 * (100vw - 600px) / 400);}} @media screen and (min-width:1000px){html{/* 1000px往後是每100畫素0.5px增加 */font-size:calc(137.5% + 6 * (100vw - 1000px) / 1000);font-size:calc(22px + 6 * (100vw - 1000px) / 1000);}} body{max-width: 640px;margin: 0 auto;}