| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>自動(dòng)計(jì)算字體</title> | |
| <meta name="description" content="px轉(zhuǎn)rem" /> | |
| <meta name="author" content="xiaoweili" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <style> | |
| @media only screen and (max-width: 1080px),only screen and (max-width:1080px) { | |
| html,body { | |
| font-size:33.75px | |
| } | |
| } | |
| @media only screen and (max-width: 960px),only screen and (max-width:960px) { | |
| html,body { | |
| font-size:30px | |
| } | |
| } | |
| @media only screen and (max-width: 720px),only screen and (max-width:720px) { | |
| html,body { | |
| font-size:22.5px | |
| } | |
| } | |
| @media only screen and (max-device-width: 640px),only screen and (max-width:640px) { | |
| html,body { | |
| font-size:20px | |
| } | |
| } | |
| @media only screen and (max-device-width: 540px),only screen and (max-width:540px) { | |
| html,body { | |
| font-size:16.875px | |
| } | |
| } | |
| @media only screen and (max-device-width: 480px),only screen and (max-width:480px) { | |
| html,body { | |
| font-size:15px | |
| } | |
| } | |
| @media only screen and (max-width: 400px) { | |
| html,body { | |
| font-size:12.5px | |
| } | |
| } | |
| @media only screen and (max-width: 360px),only screen and (max-width:320px) { | |
| html,body { | |
| font-size:11.25px | |
| } | |
| } | |
| @media only screen and (max-width: 320px),only screen and (max-device-width:320px) { | |
| html,body { | |
| font-size:10px | |
| } | |
| } | |
| </style> | |
| <style type="text/css"> | |
| *{padding: 0;margin: 0} | |
| .demo{ | |
| width: 10rem; | |
| height: 10rem; | |
| font-size: 1rem; | |
| background: #ff0000; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| console.time("test"); | |
| /* | |
| # 按照寬高比例設(shè)定html字體, width=device-width initial-scale=1版 | |
| # @pargam win 窗口window對(duì)象 | |
| # @pargam option{ | |
| designWidth: 設(shè)計(jì)稿寬度，必須 | |
| designHeight: 設(shè)計(jì)稿高度，不傳的話則比例按照寬度來計(jì)算，可選 | |
| designFontSize: 設(shè)計(jì)稿寬高下用于計(jì)算的字體大小，默認(rèn)20，可選 | |
| callback: 字體計(jì)算之后的回調(diào)函數(shù)，可選 | |
| } | |
| # return Boolean; | |
| # xiaoweili@tencent.com | |
| # ps:請(qǐng)盡量第一時(shí)間運(yùn)行此js計(jì)算字體 | |
| */ | |
| !function(win, option) { | |
| var count = 0, | |
| designWidth = option.designWidth, | |
| designHeight = option.designHeight || 0, | |
| designFontSize = option.designFontSize || 20, | |
| callback = option.callback || null, | |
| root = document.documentElement, | |
| body = document.body, | |
| rootWidth, newSize, t, self; | |
| //返回root元素字體計(jì)算結(jié)果 | |
| function _getNewFontSize() { | |
| var scale = designHeight !== 0 ? Math.min(win.innerWidth / designWidth, win.innerHeight / designHeight) : win.innerWidth / designWidth; | |
| return parseInt( scale * 10000 * designFontSize ) / 10000; | |
| } | |
| !function () { | |
| rootWidth = root.getBoundingClientRect().width; | |
| self = self ? self : arguments.callee; | |
| //如果此時(shí)屏幕寬度不準(zhǔn)確，就嘗試再次獲取分辨率，只嘗試20次，否則使用win.innerWidth計(jì)算 | |
| if( rootWidth !== win.innerWidth && count < 20 ) { | |
| win.setTimeout(function () { | |
| count++; | |
| self(); | |
| }, 0); | |
| } else { | |
| newSize = _getNewFontSize(); | |
| //如果css已經(jīng)兼容當(dāng)前分辨率就不管了 | |
| if( newSize + 'px' !== getComputedStyle(root)['font-size'] ) { | |
| root.style.fontSize = newSize + "px"; | |
| return callback && callback(newSize); | |
| }; | |
| }; | |
| }(); | |
| //橫豎屏切換的時(shí)候改變fontSize，根據(jù)需要選擇使用 | |
| win.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { | |
| clearTimeout(t); | |
| t = setTimeout(function () { | |
| self(); | |
| }, 300); | |
| }, false); | |
| }(window, { | |
| designWidth: 640, | |
| designHeight: 1136, | |
| designFontSize: 20, | |
| callback: function (argument) { | |
| console.timeEnd("test") | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="warp"> | |
| <div class="demo"> | |
| <p>width:10rem</p> | |
| <p>height:10rem</p> | |
| </div> | |
| <div style="width:100%;font-size:14px;"> | |
| <pre> | |
| </pre> | |
| </div> | |
| </body> | |
| </html> |
聯(lián)系客服
