rem 适配方案

矫情吗；* 2023-01-10 13:27 108阅读 0赞

em 和 rem 的区别

1. em 相对于父元素的字体大小来说的
    div { 
        font-size: 12px;
    }
    2. rem 相对于 html元素的字体大小来说的, rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制
    html { 
    	font-size: 12px;
    }

适配方案 一

使用媒体查询根据不同设备按比列设置 html 文字大小，然后页面元素使用 rem 作为尺寸单位，当 html
    字体大小改变时，元素也会发生改变，从而达到等比缩放的适配
    
    1.首先我们选一套标准尺寸 750为准 
    2. 我们用屏幕尺寸 除以 我们划分的份数 （15等份，份数不定），得到了 html 里面的文字大小，所以 750 下 文字大小为 50px，算法：750 / 15
    3. 页面元素的rem值 =  页面元素在 750像素的下px值 / html 里面的文字大小 列入：100px的宽度等于2rem，因为1rem等于文字大小50px，算法 100 / 50

适配方案二 不能适配 ipad 和网页

1、安装 lib-flexible 和 postcss-plugin-px2rem

npm install lib-flexible postcss-plugin-px2rem --save-dev

2、在main.js 文件中导入

import "lib-flexible/flexible";

3、由于Vue Cli3及以后的版本省去了可见的配置项,需要自己在根目录(也就是package.json同级目录)下新建vue.config.js文件，配置完毕后不要忘记重启 vue 项目哦，不然无法生效

module.exports = { 
      // rem适配
      css: { 
        loaderOptions: { 
          postcss: { 
            plugins: [
              require('postcss-plugin-px2rem')({ 
                rootValue: 75, //换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                // unitPrecision: 5, //允许REM单位增长到的十进制数字。
                //propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
                // propBlackList: [], //黑名单
                // exclude: /(page_pc)/i, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                exclude: /node_modules/i,
                // selectorBlackList: ['van-'], //要忽略并保留为px的选择器,我们一般不转换vantui中的大小
                // ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
                // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
                mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
                minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
              }),
            ]
          }
        }
      },
    }

vscode 安装插件 cssrem 也可以辅助计算

cssrem // 可以自动把 px 转换为 rem
    这个插件默认的html文字大小 cssroot  16px 需要手动修改为自己的默认大小

适配方案三 都可以适配

1、安装 amfe-flexible 和 postcss-plugin-px2rem

npm i -S amfe-flexible
    npm i --save postcss-plugin-px2rem

2、在main.js 文件中导入

import "amfe-flexible/index";