rem单位和less预处理器_2.24rem;-优快云博客

本文链接：https://blog.youkuaiyun.com/Heimaxiaozou/article/details/125963458

本文介绍了rem作为相对单位在前端开发中的应用，强调其相对于html字体大小的特性，以及如何根据屏幕大小调整页面布局。同时，文章探讨了媒体查询的使用，结合flexible.js实现响应式设计。此外，还深入讲解了less预处理器的新特性，包括嵌套规则、变量、导入和导出方法，为前端开发提供更高效的方式。

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

rem是相对单位,默认相对html字体大小

1.默认html字体大小

2.也是相对单位,相对于html标签的字体大小

3.使用场景:html字体大小变化,页面跟着一起变化,单位使用rem

如下box的大小宽高都为200px:

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <style>
        .box{
            width: 10rem;
            height: 10rem;
            background-color: pink;
        }
        html{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="box">盒子里的文字</div>
</body>
</html>

检测屏幕大小

1.检测屏幕大小使用媒体查询 @media

2.检测屏幕在320px时,body颜色变成绿色

<!DOCTYPE html>
<html lang="en">

<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">
    <title>Document</title>
    <style>
        /* 检测屏幕大小使用媒体查询 @media */
        /* 检测屏幕在320px时,body颜色变成绿色 */
        @media(width:320px) {
            body {
                background-color: green;
            }
        }

        /* 检测屏幕在375px时,body颜色变成黄色 */
        @media(width:375px) {
            body {
                background-color: yellow;
            }
        }
    </style>
</head>

<body>

</body>

</html>

媒体查询应用

设计师说按照标准稿iphone6,7,8 屏幕宽度为375px

设置html字体大小,设置为分成10等份

需求一个宽高为75px的盒子

rem=实际测量值px÷设置的html字体大小

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <style>
        .box{
            width: 2rem;
            height: 2rem;
            background-color: pink;
        }
        @media(width:375px){
            html{ 
                font-size: 37.5px;
            }
        }
    </style>

</head>
<body>
    <div class="box"></div>
</body>
</html>

flexible.js文件

flexible原理:通过媒体查询设置html标签的字体大小,就不需要再去写媒体查询了

js放在body标签结束标签的上面

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <style>
        /* rem=测量值÷标准参考值(37.5) */
        .box{
            width: 2.24rem;
            height: 1.3rem;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <!-- 需求:测量值是84px*50px -->
    <div class="box"></div>
    <!-- flexible原理:通过媒体查询设置html标签的字体大小,就不需要再去写媒体查询了 -->
    <!-- js放在body标签结束标签的上面 -->
    <script src="./js/flexible.js"></script>
</body>
</html>

less的嵌套新写法

//现在后代选择器的使用
.box{
    background-color: pink;
    .son{
        color: red;
        .p{
            font-size: 18px;
            .span{
                color: yellowgreen;
            }
        }
    }
}
//现在less里面的伪类选择器的使用
.box{
    a{
        p{
            &:hover{
                color: yellow;
            }
        }
    }
}
// &符号一般配合伪类选择器使用
.box{
    a{
        &:hover::before{
            content: '';
        }
    }
}

less的变量使用

//变量是一个容器
//好处:方便管理,维护
//语法@变量名:值
@bordercolor:1px solid yellow;
//基准值
@basesize: 37.5rem;
.box{
    width: (180/@basesize);
    height: (70/@basesize);
    border: @bordercolor;
}
.box2{
    width: (180/@basesize);
    height: (70/@basesize);
    border-top: @bordercolor;
    border-left: @bordercolor;
    border-right: @bordercolor;
}

less的导入方式

//文件导入功能,导入less文件
//第一种写法
@import url(./02-less的嵌套.less);
//第二种写法
@import './06-less的导出方法2.less';
@import './01-体验less';

less的导出方式

方法1

方法2

// less的导出方法2 必须写在最前面 了解
// out:'../css/'
p{
    color: red;
}

less的禁止导出

// out:false
// 禁止导出,不让生成css
.box{
    font-size: 14px;
    background-color: pink;
}