rem基础（rem单位），媒体查询（语法规范（mediatype查询类型，关键字，媒体特性，引入资源，）），less基础（维护CSS的弊端，介绍，使用，变量，编译，vscode插件，嵌套，运算）

最新推荐文章于 2025-12-12 13:39:43 发布

原创

最新推荐文章于 2025-12-12 13:39:43 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

本文探讨了rem单位在移动端布局的优势，介绍了如何结合媒体查询进行灵活的屏幕适配，并讲解了Less CSS预处理器的基础使用，包括变量、嵌套和运算，以及VSCode中的Easyless插件。

rem基础

rem单位

em是根据父元素的字体大小来设置的，而rem是根据html的字体大小来设置的，也就是说一个页面有很多父元素可能em并不好用，但一个页面只有一个html字体大小，所以rem配合媒体查询用在移动端可以先识别屏幕大小然后再设置本身进行不同屏幕不同html字体大小的设置

媒体查询

语法规范

<style>
        /* 当屏幕尺寸宽度小于等于800，使用以下设置 */
        @media screen and (max-width: 800px){
            body {
                background-color: pink;
            }
        }
        /* 当屏幕尺寸宽度小于等于500，使用以下设置 */
        @media screen and (max-width: 500px){
            body {
                back