vue项目中怎样进行rem替换px的操作?

Admin 2021-09-04 群英技术资讯 441 次浏览

    vue项目中怎样进行rem替换px的操作?rem和px都是针对字体大小的,一些朋友对于rem和px的替换比较好奇,下面小编就给大家分享rem替换px的实例,有需要的朋友借鉴参考,下面我们一起来看一看吧。

    移动端页面适配,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里面加上

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    在项目根目录下添加.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" rel="external nofollow"  type="text/css">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="/shipei.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </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即可

    现在大家对于rem替换px的方法和过程应该都有所了解了,上述示例有一定的借鉴价值,有需要的朋友可以参考学习,希望对大家有帮助,想要了解更多大家可以关注群英网络其它相关文章。

文本转载自脚本之家

群英智防CDN,智能加速解决方案
标签: rem替换px

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服