less 编译适配移动端页面示例

以下是根据三种宽度生成三种div的宽度

@base360: 360px;

@base375: 375px;

@base412: 412px;

@media screen and (max-width: 320px) and (min-width: 359px) {

  @baseFont: @base360/@base375;

  div { width: @baseFont; }

}

@media screen and (max-width: 360px) and (min-width: 375px) {

  @baseFont: @base412/@base375;

  div { width: @baseFont; }

}

@media screen and (max-width: 375px) and (min-width: 412px) {

  @baseFont: @base412/@base375;

  div { width: @baseFont; }

}