美文网首页
rem 手机屏幕适配

rem 手机屏幕适配

作者: 吖蛋黄 | 来源:发表于2018-04-02 09:57 被阅读0次

    手机端屏幕适配解决方案(含屏幕旋转):

    
    
    function adapt(designWidth, rem2px){
      var d = window.document.createElement('div');
      d.style.width = '1rem';
      d.style.display = "none";
      var head = window.document.getElementsByTagName('head')[0];
      head.appendChild(d);
      var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
      d.remove();
      document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
      var st = document.createElement('style');
      var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";
      var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
      st.innerHTML = portrait + landscape;
      head.appendChild(st);
      return defaultFontSize
    };
    var defaultFontSize = adapt(640, 100);
    
    
    

    danhuan 阅读笔记 2018.04.02
    文章:https://mp.weixin.qq.com/s/JIRN56acxvJgmzk1Fjj6LA


    好好生活,勤劳又勇敢,美丽又可爱!



    相关文章

      网友评论

          本文标题:rem 手机屏幕适配

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