{"id":7364,"date":"2019-04-22T16:50:26","date_gmt":"2019-04-22T08:50:26","guid":{"rendered":"https:\/\/sdeno.com\/?p=7364"},"modified":"2024-04-07T16:05:18","modified_gmt":"2024-04-07T08:05:18","slug":"%e7%a7%bb%e5%8a%a8%e7%ab%afrem%e5%8d%95%e4%bd%8d%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=7364","title":{"rendered":"\u4e3a\u79fb\u52a8\u7aefrem\u5355\u4f4d\u89e3\u51b3\u65b9\u6848\u2014\u2014flexible.js"},"content":{"rendered":"

\u65b9\u6848\u4e00\uff1a<\/span><\/p>\n

\u5728\u6240\u6709\u7684css\u548cjs\u6700\u5148\u5f15\u5165<\/p>\n

flexible_css.js,flexible<\/a>\u00a0 \u6709\u6837\u5f0f\u7248\u672c<\/p>\n

flexible<\/a>\u00a0 \u00a0\u65e0\u6837\u5f0f\u7248\u672c<\/p>\n

http:\/\/g.tbcdn.cn\/mtb\/lib-flexible\/0.3.4\/??flexible_css.js,flexible.js<\/pre>\n
\u5047\u5982\u8bbe\u8ba1\u5e08\u7ed9\u6765\u7684\u8bbe\u8ba1\u7a3f\u662f\u5bbd375px\u90a3\u4e48\uff0c100px\/37.5=2.6666666667rem<\/p>\n
\u5982\u679c\u8bbe\u8ba1\u7a3f\u662f750px\uff0c\u90a3\u4e48100px\/75\u5355\u4f4drem<\/p>\n
\u751a\u81f3\u8fdeviewport\u548c\u521d\u59cb\u5316\u6837\u5f0f\u90fd\u4e0d\u7528\u8bbe\u7f6e\u4e86\uff0c\u5f15\u5165\u7684\u94fe\u63a5\u5df2\u7ecf\u5e2e\u6211\u4eec\u8bbe\u7f6e\u597d\u4e86\u521d\u59cb\u5316\u6837\u5f0f\u548c\u52a8\u6001\u8bbe\u7f6eviewport<\/p>\n
 <\/p>\n
\u6df1\u5165\u7406\u89e3rem\u539f\u7406\uff0crem\u5355\u4f4d\u662f\u76f8\u5bf9\u5355\u4f4d\uff0c\u662f\u76f8\u5bf9\u4e8ehtml\u7684font-size<\/p>\n
\u628a\u5c4f\u5e55\u5206\u621010\u7b49\u5206\uff0c\u5c4f\u5e55\u5bbd\u4ee5375px\u4e3a\u57fa\u51c6\uff0c\u6bcf\u4e00\u4efd\u662f37.5px\uff0c1\u4efd\u5c31\u662f1rem<\/p>\n
<html lang=”en” style=”font-size: 37.5px”><\/p>\n
<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2019\/04\/\u5fae\u4fe1\u56fe\u7247_20240407155836.png\"<\/figure>\n
\u753b\u56fe\u5c31\u5f88\u597d\u7406\u89e3\u4e86\uff0c\u5728\u53bb\u4e86\u89e3\u8fd9\u53e5\u8bdd\uff1a\u5047\u5982\u8bbe\u8ba1\u5e08\u7ed9\u6765\u7684\u8bbe\u8ba1\u7a3f\u662f\u5bbd375px\u90a3\u4e48\uff0c100px\/37.5=2.6666666667rem\uff0c<\/p>\n
\u53ea\u8981\u628a\u5143\u7d20\u7684rem\u503c\u8ba1\u7b97\u597d\u4e4b\u540e\uff0chtml\u7684font-size\u503c\u90fd\u4f1a\u968f\u7740\u5c4f\u5e55\u5bbd\u5ea6\u53d8\u5316\uff0c\u5143\u7d20\u5927\u5c0f\u4e5f\u4f1a\u6210\u6bd4\u4f8b\u653e\u5927\u7f29\u5c0f<\/p>\n
 <\/p>\n
 <\/p>\n
\u5b9e\u4f8b\uff1a<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<!-- \u53bb\u6389meta\uff0c\u4ea4\u7ed9flexible.js\u81ea\u52a8\u5904\u7406 -->\r\n<!-- <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/> -->\r\n<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" \/>\r\n<title>Document<\/title>\r\n<script src=\".\/js\/flexible.js\"><\/script> \r\n<link rel=\"stylesheet\" href=\".\/css\/index.css\" rel=\"external nofollow\" \/>  <!--\u5982\u679c\u5f15\u5165\u6709\u6837\u5f0f\u7684flexible.js\uff0c\u8fde\u521d\u59cb\u5316css\u90fd\u53ef\u4ee5\u4e0d\u7528\u5199-->\r\n<\/head>\r\n<body>\r\n <div class=\"wrap\">\r\n <div class=\"title\">\u9996\u9875<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
\/\/index.css\uff0c\u6837\u5f0f\u7b80\u5355\u66b4\u529b\u7684\u521d\u59cb\u5316<\/p>\n
html,\r\nbody {\r\n margin: 0;\r\n padding: 0;\r\n}<\/pre>\n
 <\/p>\n
 <\/p>\n
vue-cli4\u90e8\u7f72<\/p>\n
1\uff0c<\/p>\n
npm install lib-flexible --save \r\nnpm install postcss-px2rem --save<\/pre>\n
 <\/p>\n
 <\/p>\n
2\uff0c\u5728main.js\u4e2d\u5f15\u5165lib-flexible<\/p>\n
import 'lib-flexible'<\/pre>\n
 <\/p>\n
 <\/p>\n
3\uff0c\u7f16\u8f91vue.config.js<\/p>\n
module.exports = {\r\n .\r\n .\r\n css: {\r\n  loaderOptions: {\r\n    css: {},\r\n    postcss: {\r\n      plugins: [\r\n        require('postcss-px2rem')({\r\n          remUnit: 37.5 \/\/\u8bbe\u8ba1\u56fe\u7ed9\u7684375px\u7684\u56fe,100px\u7684\u8bdd\uff0c\u90a3\u4e48100\/37.5rem\r\n        })\r\n      ]\r\n    }\r\n  }\r\n }\r\n\r\n}<\/pre>\n
 <\/p>\n
\u8fd9\u91cc\u6709\u4e00\u4e2a\u95ee\u9898\u5982\u679c\u6837\u5f0f\u662f\u5199\u5728js\u4e2d\u5982\u4f55\u9002\u914d\uff1f\uff0c\u89e3\u51b3\u65b9\u6cd5\u5982\u4e0b\uff1a<\/p>\n
\u8fd9\u91cc\u4ee51920\u4e3a\u6848\u4f8b\uff0c\u5982\u679c\u6d4f\u89c8\u5668\u7a97\u53e3\u662f\u5168\u5c4f\u90a3\u4e48\u503c\u5c31\u662f1\uff0c\u7f29\u5c0f\u4f1a\u6309\u6bd4\u4f8b\u663e\u793a<\/p>\n
setHtmlSize() {\r\n      let defaultWidth = 1920;\r\n      let defaultFontSize = 100;\r\n      let minWidth = 1200;\r\n      let wd = document.body.clientWidth;\r\n      let fontSize;\r\n      let globalScale = wd \/ defaultWidth;\r\n\r\n      if (wd > defaultWidth) {\r\n        fontSize = defaultFontSize;\r\n      } else if (wd < minWidth) {\r\n        globalScale = minWidth \/ defaultWidth;\r\n        fontSize = (minWidth \/ defaultWidth) * defaultFontSize;\r\n      } else {\r\n        fontSize = (wd \/ defaultWidth) * defaultFontSize;\r\n      }\r\n      \r\n      console.logg(globalScale) \/\/\u8fd9\u91cc\u5c31\u662f\u83b7\u53d6\u7f29\u653e\u5c4f\u5e55\u6bd4\u4f8b\u7684\u503c\r\n      \/\/ document.querySelector('html').style.fontSize = fontSize + 'px';\r\n},\r\n\r\n\r\nthis.setHtmlSize()\r\n\r\nwindow.addEventListener('resize', ()=>{\r\n   this.setHtmlSize()\r\n});<\/pre>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
\u4e5f\u53ef\u53c2\u8003\uff1a\u300avuelic\u811a\u624b\u67b6\u9002\u914d\u79fb\u52a8\u7aef\u89e3\u51b3\u65b9\u6cd5rem\u300b<\/a><\/p>\n
 <\/p>\n
\u65b9\u6848\u4e8c\uff1a<\/span><\/p>\n
<style>\r\n    *{margin: 0;padding: 0;}\r\n<\/style>\r\n<script>\r\n    ;(function(win) {\r\n        var docEl = win.document.documentElement,\r\n            tid;\r\n\r\n        function refreshRem() {\r\n            var width = docEl.getBoundingClientRect().width;\r\n            var rem = width \/ 750*100;\/\/\u4ee5750px\u4e3a\u539f\u7a3f\uff0c\u9664\u4ee5100\u53ef\u5f97\u5404\u5143\u7d20\u7684rem\r\n            docEl.style.fontSize = rem + \"px\";\r\n            var actualSize = parseFloat(window.getComputedStyle(docEl)[\"font-size\"]);\r\n            if (actualSize !== rem) {\r\n                var remScaled = rem \/ ( actualSize \/ rem );\r\n                docEl.style.fontSize = remScaled + \"px\"\r\n            }\r\n        }\r\n\r\n        function dbcRefresh() {\r\n            clearTimeout(tid);\r\n            tid = setTimeout(refreshRem, 100)\r\n        }\r\n\r\n        win.addEventListener(\"resize\", function() { dbcRefresh() }, false);\r\n        win.addEventListener(\"pageshow\", function(e) {\r\n            if (e.persisted) { dbcRefresh() }\r\n        }, false);\r\n        refreshRem();\r\n    })(window);\r\n<\/script><\/pre>\n
\u5982\u679c\u8bbe\u8ba1\u7ed9\u5e73\u9762\u56fe\u5bbd\u5ea6\u662f750px\u00a0 \u4e00\u4e2a\u56fe\u7247\u5bbd\u662f200px\uff0c\u90a3\u4e48\u6837\u5f0f\u5c31\u662f200\/100=2rem<\/p>\n
\u5982\u679c\u8bbe\u8ba1\u7ed9375px\u00a0 \u4e00\u4e2a\u56fe\u7247\u5bbd\u662f100px\uff0c\u90a3\u4e48\u6837\u5f0f\u5c31\u662f100\/100*2=2rem<\/p>\n
 <\/p>\n
 <\/p>\n
\n
\u5148\u4e86\u89e3rem\u5355\u4f4d\u4f5c\u7528\uff1a<\/p>\n
1\uff0crem \u53ef\u4ee5\u63a7\u5236\u5b57\u4f53\u5927\u5c0f\u3001\u5bbd\u3001\u9ad8\u3002\u6805\u683c\u5e03\u5c40\u63a8\u8350\u4f7f\u7528\u767e\u5206\u6bd4\u6765\u63a7\u5236
\n2\uff0crem\u5927\u5c0f\u90fd\u662f\u76f8\u5bf9\u4e8ehtml font-size\u7684\u503c\u6765\u786e\u5b9a\u7684<\/p>\n
\u4f8b\u5982\uff0c\r\nhtml\u5982\u679c\u4e0d\u8bbe\u7f6efont-size\u90a3\u4e48\u9ed8\u8ba4\u662f16px\r\n1rem=16px\r\n\r\n\u5982\u679c\u8bbe\u7f6efont-size:17px\r\n1rem=17px\r\n\r\n\u5982\u679c\u4ee5html font-size:17px\u4e3a\u51c6\uff0c\u67d0\u4e00\u4e2a\u5143\u7d20\u5bbd\u9ad8\u90fd\u662f100px\u7684\u8bdd\uff0c\u90a3\u4e48\u8ba1\u7b97\u6210rem\u5c31\u8981100\u9664\u4ee517<\/pre>\n
 <\/p>\n
\u4e3a\u4e86\u907f\u514d\u8fd9\u6837\u9ebb\u70e6\u7684\u8ba1\u7b97\uff0c\u5373\u4f7f\u4f7f\u7528css\u7684\u5a92\u4f53\u67e5\u8be2\u4e5f\u8981\u9488\u5bf9\u5f88\u591a\u4e0d\u540c\u624b\u673a\u5c4f\u5e55\u8bbe\u7f6e\u8fd8\u8981\u505a\u51fa\u5f88\u591a\u6dfb\u52a0\u4fee\u6539\uff0c\u6240\u4ee5\u8003\u8651\u4f7f\u7528js\u6765\u5b8c\u6210\u3002<\/p>\n
\u9875\u9762\u524d\u9762\u6dfb\u52a0\uff1a<\/p>\n
\/\/designWidth:\u8bbe\u8ba1\u7a3f\u7684\u5b9e\u9645\u5bbd\u5ea6\u503c\uff0c\u9700\u8981\u6839\u636e\u5b9e\u9645\u8bbe\u7f6e\r\n\/\/maxWidth:\u5236\u4f5c\u7a3f\u7684\u6700\u5927\u5bbd\u5ea6\u503c\uff0c\u9700\u8981\u6839\u636e\u5b9e\u9645\u8bbe\u7f6e\r\n\/\/\u8fd9\u6bb5js\u7684\u6700\u540e\u9762\u6709\u4e24\u4e2a\u53c2\u6570\u8bb0\u5f97\u8981\u8bbe\u7f6e\uff0c\u4e00\u4e2a\u4e3a\u8bbe\u8ba1\u7a3f\u5b9e\u9645\u5bbd\u5ea6\uff0c\u4e00\u4e2a\u4e3a\u5236\u4f5c\u7a3f\u6700\u5927\u5bbd\u5ea6\uff0c\u4f8b\u5982\u8bbe\u8ba1\u7a3f\u4e3a750\uff0c\u6700\u5927\u5bbd\u5ea6\u4e3a750\uff0c\u5219\u4e3a(750,750)\r\n;(function(designWidth, maxWidth) {\r\n  var doc = document,\r\n      win = window,\r\n      docEl = doc.documentElement,\r\n      remStyle = document.createElement(\"style\"),\r\n      tid;\r\n\r\n  function refreshRem() {\r\n     var width = docEl.getBoundingClientRect().width;\r\n     maxWidth = maxWidth || 540;\r\n     width>maxWidth && (width=maxWidth);\r\n     var rem = width * 100 \/ designWidth;\r\n     remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';\r\n  }\r\n\r\n  if (docEl.firstElementChild) {\r\n     docEl.firstElementChild.appendChild(remStyle);\r\n  } else {\r\n     var wrap = doc.createElement(\"div\");\r\n     wrap.appendChild(remStyle);\r\n     doc.write(wrap.innerHTML);\r\n     wrap = null;\r\n  }\r\n  \/\/\u8981\u7b49 wiewport \u8bbe\u7f6e\u597d\u540e\u624d\u80fd\u6267\u884c refreshRem\uff0c\u4e0d\u7136 refreshRem \u4f1a\u6267\u884c2\u6b21\uff1b\r\n  refreshRem();\r\n\r\n  win.addEventListener(\"resize\", function() {\r\n    clearTimeout(tid); \/\/\u9632\u6b62\u6267\u884c\u4e24\u6b21\r\n    tid = setTimeout(refreshRem, 300);\r\n  }, false);\r\n\r\n   win.addEventListener(\"pageshow\", function(e) {\r\n     if (e.persisted) { \/\/ \u6d4f\u89c8\u5668\u540e\u9000\u7684\u65f6\u5019\u91cd\u65b0\u8ba1\u7b97\r\n       clearTimeout(tid);\r\n       tid = setTimeout(refreshRem, 300);\r\n     }\r\n  }, false);\r\n\r\n  if (doc.readyState === \"complete\") {\r\n     doc.body.style.fontSize = \"16px\";\r\n  } else {\r\n     doc.addEventListener(\"DOMContentLoaded\", function(e) {\r\n         doc.body.style.fontSize = \"16px\";\r\n     }, false);\r\n  }\r\n})(750, 750);   \/\/\u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u8bbe\u8ba1\u5bbd\u5ea6\u4e00\u822c\u5bbd\u5ea6\u6709375\uff0c640\uff0c750\u6839\u636e\u8bbe\u8ba1\u800c\u5b9a\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u6700\u5927\u5bbd\u5ea6\u63a8\u8350\u8bbe\u7f6e750\u6216\u8005640\u90fd\u884c<\/pre>\n
 <\/p>\n
\u6a21\u677f\u53ca\u521d\u59cb\u5316\u4ee3\u7801\uff1a<\/span><\/p>\n
html\uff1a<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no\" name=\"viewport\">\r\n<meta content=\"yes\" name=\"apple-mobile-web-app-capable\">\r\n<meta content=\"black\" name=\"apple-mobile-web-app-status-bar-style\">\r\n<meta content=\"telephone=no\" name=\"format-detection\">\r\n<meta content=\"email=no\" name=\"format-detection\">\r\n<meta name=\"description\" content=\"\u4e0d\u8d85\u8fc7150\u4e2a\u5b57\u7b26\"\/>\r\n<meta name=\"keywords\" content=\"\"\/>\r\n<meta content=\"caibaojian\" name=\"author\"\/>\r\n<title>\u524d\u7aef\u5f00\u53d1\u535a\u5ba2<\/title>\r\n<link rel=\"stylesheet\" href=\"base.css\">\r\n<script type=\"text\/javascript\">\r\n\/\/\u5f15\u5165\u8be5flexible.min.js\r\n!function(e,t){function n(){var n=l.getBoundingClientRect().width;t=t||540,n>t&&(n=t);var i=100*n\/e;r.innerHTML=\"html{font-size:\"+i+\"px;}\"}var i,d=document,o=window,l=d.documentElement,r=document.createElement(\"style\");if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement(\"div\");a.appendChild(r),d.write(a.innerHTML),a=null}n(),o.addEventListener(\"resize\",function(){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener(\"pageshow\",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1),\"complete\"===d.readyState?d.body.style.fontSize=\"16px\":d.addEventListener(\"DOMContentLoaded\",function(e){d.body.style.fontSize=\"16px\"},!1)}(750,750);\r\n<\/script>\r\n<\/head>\r\n\r\n<body>\r\n<!-- \u6b63\u6587 -->\r\n<\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
 <\/p>\n
\u521d\u59cb\u5316\u6837\u5f0f\uff1a<\/p>\n
base.css<\/p>\n
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}\r\nul,ol{list-style:none;}\r\na{text-decoration:none;}\r\nhtml{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}\r\nbody{line-height:1.5; font-size:14px;}\r\nbody,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\\5FAE\\8F6F\\96C5\\9ED1,\\5B8B\\4F53,sans-serif;}\r\nb,strong{font-weight:bold;}\r\ni,em{font-style:normal;}\r\ntable{border-collapse:collapse;border-spacing:0;}\r\ntable th,table td{border:1px solid #ddd;padding:5px;}\r\ntable th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}\r\nimg{border:0 none;width:auto\\9;max-width:100%;vertical-align:top; height:auto;}\r\nbutton,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}\r\nbutton,html input[type=\"button\"],input[type=\"reset\"],input[type=\"submit\"]{-webkit-appearance:button;cursor:pointer;}\r\nbutton[disabled],input[disabled]{cursor:default;}\r\ninput[type=\"checkbox\"],input[type=\"radio\"]{box-sizing:border-box;padding:0;}\r\ninput[type=\"search\"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}\r\ninput[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none;}\r\ninput:focus{outline:none;}\r\nselect[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}\r\narticle,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}\r\naudio,canvas,video,progress{display:inline-block;}\r\nbody{background:#fff;}\r\ninput::-webkit-input-speech-button {display: none}\r\nbutton,input,textarea{\r\n-webkit-tap-highlight-color: rgba(0,0,0,0);\r\n}<\/pre>\n
 <\/p>\n
\u63d0\u9192:\u6bcf\u4e2a\u4eba\u7684\u89e3\u51b3\u65b9\u6848\u90fd\u4e0d\u4e00\u6837\uff0c\u6839\u636e\u9879\u76ee\u800c\u5b9a\u3002<\/p>\n
 <\/p>\n
caibaojian.com\/simple-flexible.html<\/a><\/p>\n
 <\/p>\n
\u65b9\u6848\u4e00\uff1a \u5728\u6240\u6709\u7684css\u548cjs\u6700\u5148\u5f15\u5165 flexible_css.js,flexible\u00a0 \u6709\u6837\u5f0f\u7248\u672c fle […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-7364","post","type-post","status-publish","format-standard","hentry","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/7364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7364"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/7364\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}