1)第一种实现方式

@body_center_width:  ~`$(document).width()-400+'px'`;            #helloworld {
             width: @body_center_width;          height: 200px;          background: #000;      }

@height: ~`document.body.clientWidth-400+'px'`;       #box {
    height:200px; width:@height; background:#080; opacity:@height; }

2)第二种实现方式

/** 1)收缩CSS代码 **/      .box{
         border:1px solid #ddd;      width:calc(100%-2px)      }            /** 2）宽度，10em加20px。 **/      －收缩CSS代码      .box{
         width:calc(10em+20px)      }            /** 3）3栏等宽布局。 **/      －收缩CSS代码      .box{
         margin-left:20px;      width:calc(100%/3-20px);      }      .box:nth-child(3n){
         margin-left:0;      }

高级运算式

 

－收缩CSS代码      width:calc(100%/3 - 2*1em - 2*1px);            这样写也是可以的：      －收缩CSS代码      width:calc(100% / 3 - 2 * 1em - 2 * 1px);            但是这样写就是错的：      －收缩CSS代码      width:calc(100%/3-2*1em-2*1px);