简易版rem布局

作者: gem_Y | 来源:发表于2019-12-09 10:42 被阅读0次

简易版rem布局
苏宁易购项目
rem布局
h5自适应布局
移动端开发
移动端rem布局背景图片使用以及sprite雪碧图
移动端适配方法
css-进阶-css开发技巧-Layout Skill：布局技巧
移动端布局方案 rem
移动端、PC端屏幕适配

参考：https://www.jianshu.com/p/b00cd3506782

1、简易版rem布局（375px的设计稿，其实一般来说应该是750）
2、图片不缓存

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>简易版rem布局</title>
  </head>
  <body>
    <div class="box">
      <div class="content">
        <div class="title">
          <div class="logo"></div>
          <div class="version">版本号：V1.6</div>
        </div>
        <div class="code-box ios-code-box">
          <div class="ios-tag tag"></div>
          <img id="iosCode" alt="">
        </div>
        <div class="code-box and-code-box">
            <div class="and-tag tag"></div>
            <img id="andCode" alt="">
          </div>
      </div>
    </div>

    <script>
      (function (doc, win) {
        
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>1024){
                    docEl.style.fontSize = '100px';
                    docEl.style.paddingTop = '20px'
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
                }
            };
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);

        var ios = document.querySelector('#iosCode')
        var and = document.querySelector('#andCode')
        ios.setAttribute('src', 'ios-code.png?time=' + (new Date().getTime()))
        and.setAttribute('src', 'and-code.png?time=' + (new Date().getTime()))
      })(document, window);
    </script>
  </body>
</html>