rem及适配布局之实例

最新推荐文章于 2025-08-05 13:40:23 发布

原创最新推荐文章于 2025-08-05 13:40:23 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

文章展示了如何在Less中定义公共样式，特别是针对不同屏幕尺寸调整字体大小的媒体查询方法。通过设置变量和导入机制，实现了在index.less中引用common.less的样式，最终应用到HTML页面以适应不同设备的视口宽度。

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

准备文件css
css内存放：common.less,index.less,

公共样式

commom.less

//设置常见的屏幕尺寸，修改里面的字体大小,定义份数为15份。
html{
    font-size: 50px;
}
@no: 15;
@media screen and (min-width:411px) {
    html{
        font-size: (444px / @no);
    
    }
}
//320
@media screen and (min-width: 320px) {
    html{
        font-size: (320px / @no);
    }
}
//360
@media screen and (min-width:360px) {
    html{
        font-size: (360px / @no);
    }
}
//375

保存，生成文件.css

html {
  font-size: 50px;
}
@media screen and (min-width: 411px) {
  html {
    font-size: 29.6px;
  }
}
@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333333px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 24px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 25px;
  }
}

index.less引用commom.less

@import "common";

保存，生成对应index.css文件，内容与common.css一样
将index.css引入index.html内

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <title>dddd  </title>
    <style>
    </style>
</head>