美文网首页
手机端rem布局

手机端rem布局

作者: 王远清orz | 来源:发表于2019-06-26 14:24 被阅读0次

    (function() {
    // 引入css
    var cssText =
    '' +
    '@charset "utf-8";html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-overflow-scrolling:touch;font-size:100px}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body,html{font-family:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif}body{min-width:320px;font-size:16px;text-rendering:optimizeLegibility;overflow-x:hidden}article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}input,input[type=button],input[type=reset],input[type=submit]{resize:none;border:0;-webkit-appearance:none;}button{border:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{vertical-align:middle;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:after,q:before{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}a,ins{text-decoration:none}a:active,a:hover,a:link,a:visited{background-color:transparent;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;outline:0;text-decoration:none}';
    // cssText end

    var styleEl = document.createElement('style');
    document.getElementsByTagName('head')[0].appendChild(styleEl);
    if (styleEl.styleSheet) {
    if (!styleEl.styleSheet.disabled) {
    styleEl.styleSheet.cssText = cssText;
    }
    } else {
    try {
    styleEl.innerHTML = cssText;
    } catch (e) {
    styleEl.innerText = cssText;
    }
    }
    })();

    ;(function() {
    /文字大小自适应/
    var handlerOrientationChange = function() {
    var width = window.innerWidth <= 320 ? 320 : window.innerWidth >= 640 ? 640 : window.innerWidth;
    var fontSize = 100 * (width / 375);
    document.documentElement.style.fontSize = fontSize + 'px';
    };
    window.onresize = handlerOrientationChange;
    setTimeout(function() {
    handlerOrientationChange();
    }, 0);
    })();

    相关文章

      网友评论

          本文标题:手机端rem布局

          本文链接:https://www.haomeiwen.com/subject/ngdccctx.html