rem原理 - 2

最新推荐文章于 2025-05-26 12:30:00 发布

原创最新推荐文章于 2025-05-26 12:30:00 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

CSS 同时被 2 个专栏收录

20 篇文章

订阅专栏

WEB、HTML

14 篇文章

订阅专栏

博客提及了GitHub地址和渲染结果图，可能与代码项目相关，通过GitHub地址可获取项目代码，渲染结果图能直观展示项目的呈现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

github地址

<!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);