Vue中Calc使用

一. 代码展示

 <ul>
   <li class="phone">{{  XXX.mobile }}</li>
   <li class="line"></li>
   <li class="vchat">微信号 {{ XXX.wechat }}</li>
 </ul>

 .phone {
   float: left;
   margin-top: 20px;
   font-size: 28px;
   color: #fff;
   font-weight: 500;
   max-width: 40%;
 }

 .vchat {
   float: left;
   margin-top: 20px;
   font-size: 28px;
   color: #fff;
   font-weight: 500;
   max-width: calc(60% - 60px);
 }

二. 代码效果展示

如果我们不设置宽度（max-width），当手机号或者微信号过长时会将一个<li>标签挤到下一行。

三. calc作用

calc(60% - 60px);作用就是只占用<ul>标签的60%，这个是不管手机屏多大都可以占到这个比例，减去- 60px作用就是固定这么多长度，空余出来，这个长度是固定的，不能随着屏幕去变更。