移动端响应布局的LESS解决方案

在移动端布局的时候，因为不同机型有着不一样的屏幕宽度，是故我们经常对页面做出不同的布局，有时候，有些机型的差距不大，所以我们没有必要进行多次的重复劳动，所以我们使用响应式布局。下面是我的一种解决文案，可以让同一个设计稿在多个不同的环境达到相同的效果。

// 这里的 7.5 指的是设计稿使用的是标准尺寸是 750 px. 可以根据不同的情况进行修改

html {
    font-size: calc(100vw/7.50);
}

@rem: 100rem;

然后我们使用的时候就可以使用 less 的变量运算了

// 这里的 35, 500 指的是在设计稿上，该 div 的高 35px, 宽 500px
div {
    height: 35/@rem;
    width: 500/@rem;
}

这样我们就可以根据一个通用样式来对页面进行绘制。只要注意一下小屏与大屏就可以了