rem布局的原理

阳光穿透心脏的1/2处 2022-09-03 15:11 15阅读 0赞

## 一、什么是rem? ##

rem是相对于html的单位，rem可以实现响应式布局

## 二、rem实现原理？ ##

> 根据获取视口的宽度clientWidth，然后/7.5+px，addEventListener监听load，去执行change方法

//说明：100px=1rem
    <script>
            (function (win, doc) {
        
                var resize = 'orientationchange' in window ? 'orientationchange' : 'resize';//orientationchange：移动端存在的监听事件
                function change() {
        
                    var html = doc.documentElement;
                    var width = doc.documentElement.clientWidth || win.innerWidth
                    html.style.fontSize = width / 7.5 + 'px';
                    // 除以的数字根据效果图给的基准（一般移动端效果图750px、PC端1440px），得到一个相对容易计算的数值，就可以进行rem的使用了 
                }
                change();
                win.addEventListener(resize, change, false);
                win.addEventListener('load', change, false);
                doc.addEventListener('DOMContentLoaded', change, false);
            })(window, document);
        </script>

## 三、Vue项目中使用rem.js ##

1.  新建rem.js文件
2.  在main.js中引入，Vue.use(rem)，或者放到index.html最上面的head

## 四、Vue使用lib-flexible+ px2rem-loader ##

1.  下载lib-flexible

npm install lib-flexible --save-dev

1.  main.js中引入

// px2rem 自适应
    import 'lib-flexible'

1.  安装 px2rem-loader

npm install px2rem-loader --save-dev

1.  配置px2rem-loader  
    4.1在build/utils.js中，找到exports.cssLoaders

const cssLoader = {
        
        loader: 'css-loader',
        options: {
        
          minimize: process.env.NODE_ENV === 'production',
          sourceMap: options.sourceMap
        }
      }
      const px2remLoader = {
        
        loader: 'px2rem-loader',
        options: {
        
          remUnit: 75  //以设计稿750为例， 750 / 10 = 75
        }
      }

4.2 在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
        
        const loaders = [cssLoader,px2remLoader]
        if (loader) {
        
          loaders.push({
        
            loader: loader + '-loader',
            options: Object.assign({
        }, loaderOptions, {
        
              sourceMap: options.sourceMap
            })
          })
        }