vue项目中使用rem替换px-使用方法-01

女爷i 2022-10-12 15:52 53阅读 0赞

> 移动端页面适配，rem和vw适配方案
> 
> 基础点：rem相对根节点字体的大小。所以不用px;  
> 根字体：字体的大小px;  
> px：你就当成cm(厘米)这样的东西吧；  
> 基准：750设计稿（一般UI设计师给的都是750的设计稿）；

### 工具 ###

> vue-cli:使用脚手架来搭建vue前端项目  
> postcss:就是postcss用js插件帮你转换css样式的一个工具。比如，这里的把你的文件里面16px替换成1rem(根大小默认16px的情况）；这样你就不用自己去算了！  
> cssrem:主要是帮你把px(UI设计给设计稿上的px)转换成对应的rem  
> 然后：还要用js代码去动态算根目录应该有的字体大小，反正就是一段js代码去动态获取屏幕宽度

## 安装插件 ##

npm i postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url

## 然后再index.html里面加上 ##

## 在项目根目录下添加.postcssrc.js文件 ##

module.exports = {
        "plugins": {
          "postcss-import": {},      //用于@import导入css文件
          "postcss-url": {},           //路径引入css文件或node_modules文件
          "postcss-aspect-ratio-mini": {},   //用来处理元素容器宽高比
          "postcss-write-svg": { utf8: false },    //用来处理移动端1px的解决方案。该插件主要使用的是border-image和background来做1px的相关处理。
          "postcss-cssnext": {},  //该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。
          "postcss-px-to-viewport": {    //把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。
              viewportWidth: 750,    //视窗的宽度
              viewportHeight: 1334,   //视窗的高度
              unitPrecision: 3,    //将px转化为视窗单位值的小数位数
              viewportUnit: 'vw',    //指定要转换成的视窗单位值
              selectorBlackList: ['.ignore', '.hairlines'],    //指定不转换视窗单位值得类，可以自定义，可以无限添加
              minPixelValue: 1,    //小于等于1px不转换为视窗单位
              mediaQuery: false   //允许在媒体查询中使用px
          },
          "postcss-viewport-units":{}, //给vw、vh、vmin和vmax做适配的操作,这是实现vw布局必不可少的一个插件
          "cssnano": {    //主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。
              preset: "advanced",   //重复调用
              autoprefixer: false,    //cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false。
              "postcss-zindex": false   //只要启用了这个插件，z-index的值就会重置为1
           } 
        }
      }

> 当你切换不同尺寸的屏幕的时候，需要动态改变根字体的大小，一段简单的js插入在head里面：在public目录下直接新建的shipei.js,然后将这个js引入到index.html的head里面

//shipei.js
    (function() {
       function autoRootFontSize() {
           document.documentElement.style.fontSize =        Math.min(screen.width,document.documentElement.getBoundingClientRect().width)  /  750 * 32 + 'px';
             // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！是不是很简单
       }
       window.addEventListener('resize', autoRootFontSize);
       autoRootFontSize();
    })();

## index.html ##

<!DOCTYPE html>
    <html lang="">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="/public.css" type="text/css">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title><%= htmlWebpackPlugin.options.title %></title>
        <script src="/shipei.js" type="text/javascript" charset="utf-8"></script>
      </head>
      <body>
        
        <div id="app"></div>
        
      </body>
    </html>

> 注意 放到 public 里的东西，可以不用写开头目录，脚手架打包的时候找不到，会去public文件夹找的

## 关于 ##

> getBoundingClientRect().width获取到的其实是父级的右边距离浏览器原点(0,0)左边距离浏览器原点(0,0)的距离,即父级的宽度+2padding+2border。  
> 此时的clientWidth等于父级的宽度+2\*padding,不包括边框的宽度。  
> 当不隐藏子级内容,即overflow为auto时，前者的宽度依然为这个数字,因为父级并没有改编盒模型。后者的宽度为上述得到的宽度-滚动条的宽度(17px);

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
            </style>
        </head>
        <body>
            <div id="divParent" style="background-color: #aaa; padding:8px; border:solid 7px #000; height:200px; width:500px; overflow:hidden;">
                    <div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px;
                        height: 400px; width: 600px; border: solid 3px #f00;">
                    </div>
                </div>
        </body>
    </html>
    <script type="text/javascript">
        /* 
         getBoundingClientRect().width获取到的其实是父级的右边距离浏览器原点(0,0)左边距离浏览器原点(0,0)的距离,即父级的宽度+2padding+2border。
         此时的clientWidth等于父级的宽度+2*padding,不包括边框的宽度。
         当不隐藏子级内容,即overflow为auto时，前者的宽度依然为这个数字,因为父级并没有改编盒模型。后者的宽度为上述得到的宽度-滚动条的宽度(17px);例子如下:
         */
         var divP = document.getElementById('divParent');
                var divD = document.getElementById('divDisplay');
        
                var clientWidth = divP.clientWidth;
                var getWidth = divP.getBoundingClientRect().width;
                divD.innerHTML += 'clientWidth: ' + clientWidth + '<br/>';
                divD.innerHTML += 'getWidth: ' + getWidth + '<br/>';
    </script>

> 运行结果是clientWidth为516,他的计算是内容宽+2padding  
> getWidth(也就是getBoundingClientRect().width）包括内容宽+2padding+2border  
> 第五步：就是将设计稿上的px转换成rem为单位：安装 cssrem插件 (在插件市场）：  
> 然后在 文件-->首选项-->设置 然后搜索cssrem 设置Root Font Size为16即可