移动端rem-less适配。

由于现有布局flew，流式布局和响应式布局只能实现宽度的布局，没办法实现字体大小的自适应，这个时候使用rem-less来进行适配。
@charset "utf-8";

//rem适配方案不好维护 设备太多，更新太快
//根据less进行适配
//主流移动设备尺寸,只写了苹果的
@adapterDeviceList:1242px,1125px,1080px,750px,720px,640px,320px;
//设备稿尺寸
@psdWidth:750px;
//预设基准值
@baseFontSize:100px;
//生成个list
@len:length(@adapterDeviceList);

.adapterMixin(@index) when (@index<=@len){
@media (min-width: extract(@adapterDeviceList,@index)){
html{
font-size: @baseFontSize/@psdWidth*extract(@adapterDeviceList,@index);
}
}
.adapterMixin(@index+1)
}

.adapterMixin(1);

less编辑的css文件效果是
charset “utf-8”;
@media (min-width: 1242px) {
html {
font-size: 165.6px;
}
}
@media (min-width: 1125px) {
html {
font-size: 150px;
}
}
@media (min-width: 1080px) {
html {
font-size: 144px;
}
}
@media (min-width: 750px) {
html {
font-size: 100px;
}
}
@media (min-width: 720px) {
html {
font-size: 96px;
}
}
@media (min-width: 640px) {
html {
font-size: 85.33333333px;
}
}
@media (min-width: 320px) {
html {
font-size: 42.66666667px;
}
}