移動端h5字體自適應

默認1rem等于75pxvscode可以按照cssrem進行轉換cssrem默認1rem等于16px自己在設置改成75px

vue.js用lib-flexible;可以直接用px它可以直接轉換成rem

!function(){var a="@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html {outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",b=document.createElement("style");if(document.getElementsByTagName("head")[0].appendChild(b),b.styleSheet)b.styleSheet.disabled||(b.styleSheet.cssText=a);else try{b.innerHTML=a}catch(c){b.innerText=a}}();!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("灝嗘牴鎹凡鏈夌殑meta鏍囩鏉ヨ緗緝鏀炬瘮渚?");var l=g.getAttribute("content").match(/initial-scale=([\d.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial-dpr=([\d.]+)/),o=m.match(/maximum-dpr=([\d.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1

// 調整正文字體大小
function setBodyFontSize () {
  if (document.body) {
    document.body.style.fontSize = (12 * dpr) + 'px'
  }
  else {
    document.addEventListener('DOMContentLoaded', setBodyFontSize)
  }
}
setBodyFontSize();

// /設置1rem = viewWidth / 10
function setRemUnit () {
  var rem = docEl.clientWidth / 10
  docEl.style.fontSize = rem + 'px'
}

setRemUnit()

// 在頁面上重置rem單元調整大小
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
  if (e.persisted) {
    setRemUnit()
  }
})

// 檢測0.5px支持
if (dpr >= 2) {
  var fakeBody = document.createElement('body')
  var testElement = document.createElement('div')
  testElement.style.border = '.5px solid transparent'
  fakeBody.appendChild(testElement)
  docEl.appendChild(fakeBody)
  if (testElement.offsetHeight === 1) {
    docEl.classList.add('hairlines')
  }
  docEl.removeChild(fakeBody)
}

}(window, document))

聲明:所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益,可聯系我們進行處理。
發表評論
更多 網友評論0 條評論)
暫無評論

返回頂部

主站蜘蛛池模板: 欧美色吧视频在线观看| 国产大陆xxxx做受视频| 日韩在线免费视频| 精品少妇人妻av无码专区| WWW夜片内射视频在观看视频| 亚洲福利视频一区二区三区| 国产性天天综合网| 奇米影视久久777中文字幕| 欧美啊v在线观看| 美女脱了内裤打开腿让你桶爽| 97成人碰碰久久人人超级碰OO | 亚洲第一综合天堂另类专| 国产成人亚洲欧美电影| 很黄很刺激很爽的免费视频| 欧美xxxx三人交性视频| 精品久久久影院| 高清成人爽a毛片免费网站| free性欧美极度另类性性欧美| 久草电影在线播放| 亚洲第一页中文字幕| 啊用力太猛了啊好深视频免费 | 亚洲美女黄视频| 国产v精品欧美精品v日韩| 国产精品国产三级国产AV′ | 老子影院午夜伦手机不四虎| 曰批全过程免费视频播放网站| 一级做a爰全过程免费视频毛片| 亚洲av无码成人精品国产| 亚洲精品国产高清不卡在线 | 好男人手机在线| 日产乱码卡一卡2卡3视频| 最近更新中文字幕在线| 残虐极限扩宫俱乐部小说| 色偷偷91综合久久噜噜噜男男| 六月丁香婷婷综合| 99久久精品免费看国产一区二区三区 | 免费国产va在线观看视频| 国产chinesehd在线观看| 国产女同无遮挡互慰高潮视频| 国产精品久久国产精麻豆99网站 | 国产激情视频在线观看首页|