Vue项目使用less和css3的calc时计算错误问题解决方案。

起因:

项目开发过程中,需要计算一个div版块的高度为100% - 0.48rem,于是很自然的想到了:

    .content {
      height: calc(100% - 0.48rem);
      overflow: scroll;
      word-wrap: break-word;
      word-break: normal;
    }

打开控制台查看代码效果,却发现 高度和我预想的不对。而且99.52%这个数字似乎很眼熟,看了半天才发现99.52 = 100 - 0.48
显然,这个计算结果错得很远。
Vue项目使用less和css3的calc时计算错误问题解决方案。_第1张图片

分析:

上网找了半天资料,才发现是因为less引起的。
less的计算方式跟calc方法有重叠:
在less中,calc(100% - 0.48rem)等带单位混合运算在less解析时,会被忽略单位,全部按照百分比计算,calc(100% - 0.48rem)就会被less编译成calc(99.52%);

解决办法:

下面两种写法都可以。

      .content {
        height:e("calc(100% - 0.48rem)");
        overflow: scroll;
        word-wrap: break-word;
        word-break: normal;
      }
      .content {
        height: calc(~'100% - 0.48rem');
        overflow: scroll;
        word-wrap: break-word;
        word-break: normal;
      }

第一种方法这个 e(calc("")) 我找了半天也没找到文档,不知道有没有大侠路过告知一下,为什么这样也可行。
第二种方法是应用了less的转义

你可能感兴趣的:(Vue开发,CSS,错误解决)