css|使用rem进行媒体查询的编写方法 css|less

index.less

//变量 @import "var"; //混入 @import "mixins"; //适配 @import "adapter"; //重置样式 @import "reset"; //模块

var.less

@charset "UTF-8"; //变量 //rem适配方案不好维护设备会更新设计稿尺寸预设基准值 //适配主流设备十几种 @adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px; //设计稿尺寸 @psdWidth:750px; //预设基准值 @baseFontSize:100px; //设备的种类 @len:length(@adapterDeviceList); //主体颜色 @snColor:#fabc09;

mixin.less

//遍历使用的是for循环 //less没有循环语法 //使用函数的迭代死循环 //根据数组的长度去停止当前循环 //给函数的执行附加条件 //需要序号来判断通过序号遍历 @index 1 开始 //遍历成功 .adapterMixin(@index) when ( @index > 0){ @media (min-width: extract(@adapterDeviceList,@index)){ html{ font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index); } } .adapterMixin( @index - 1); }

adapter.less