版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_36146776/article/details/90639585
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/less" href="../css/less/index.less">
<script src="../asserts/less/less.min.js"></script>
</head>
<body>
<h1 style="font-size: 0.16rem">我是文字</h1>
<h1 style="font-size: 0.32rem">我是文字</h1>
</body>
</html>
@charset "UTF-8";
@adapterDeviceList: 750px, 640px, 540px, 420px, 320px; //适配适配
@psdWidth: 750px; //设计稿尺寸
@baseFontSize: 100px;
@len: length(@adapterDeviceList); //需要适配设备的数组长度
//进行适配
// 混入模块（进行适配）
.adapterMixin(@index) when ( @index > 0){
@media (min-width: extract(@adapterDeviceList,@index)){
html{
font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
}
}
.adapterMixin( @index - 1);
}
// 适配模块(调用)
.adapterMixin(@len);
渲染结果图
