| <html> |
| <head> |
| <meta charset="utf-8" /> |
| <title>自動計算字體</title> |
| <meta name="description" content="px轉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"); |
| /* |
| # 按照寬高比例設定html字體, width=device-width initial-scale=1版 |
| # @pargam win 窗口window對象 |
| # @pargam option{ |
| designWidth: 設計稿寬度,必須 |
| designHeight: 設計稿高度,不傳的話則比例按照寬度來計算,可選 |
| designFontSize: 設計稿寬高下用于計算的字體大小,默認20,可選 |
| callback: 字體計算之后的回調函數,可選 |
| } |
| # return Boolean; |
| # xiaoweili@tencent.com |
| # ps:請盡量第一時間運行此js計算字體 |
| */ |
| !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元素字體計算結果 |
| 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; |
| //如果此時屏幕寬度不準確,就嘗試再次獲取分辨率,只嘗試20次,否則使用win.innerWidth計算 |
| if( rootWidth !== win.innerWidth && count < 20 ) { |
| win.setTimeout(function () { |
| count++; |
| self(); |
| }, 0); |
| } else { |
| newSize = _getNewFontSize(); |
| //如果css已經兼容當前分辨率就不管了 |
| if( newSize + 'px' !== getComputedStyle(root)['font-size'] ) { |
| root.style.fontSize = newSize + "px"; |
| return callback && callback(newSize); |
| }; |
| }; |
| }(); |
| //橫豎屏切換的時候改變fontSize,根據需要選擇使用 |
| 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> |