rem布局和Less的语法

=^_^=银爪

已于 2023-06-07 17:59:18 修改

阅读量173

点赞数

文章标签： html css css3

于 2023-06-07 17:56:28 首次发布

本文链接：https://blog.csdn.net/weixin_65635437/article/details/131093051

版权

文章详细介绍了CSS中关于百分比高度的问题，rem与em单位的区别，以及如何在不同屏幕尺寸下使用rem进行统一布局。此外，提到了vscode编辑器的px转rem插件和flexible.js库动态设置html字体大小的方法。文章还简述了Less预处理器的基本概念、安装与使用，以及其提供的变量、混入、嵌套等特性，帮助简化CSS编写和提高维护效率。

摘要由CSDN通过智能技术生成

1. 高度百分比问题

    <style>
        *{
            margin:0;
            padding:0;
        }
        
        .box1{
            background: #ccc;
            width: 50%;
            height: 50%;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>

:point_right: width是相对于body宽度的50%，height是相对于body高度的50%。body默认宽度是页面宽度，默认的高度是0，所以导致div没有高度。

2. rem 与 em区别

em是相对单位，使用em进行尺寸度量的元素，都是相对于自身的文字尺寸，各自为政，太过零散，不好进行统一的控制。

rem也是相对单位，所有使用rem进行尺寸度量的元素，都是相对于根元素html标签的文字尺寸，可以很容易的进行统一控制，只要html标签的字体变了，所有元素的rem都会变化。

小结：

em与rem都是相对单位， em相对于自己的字体大小 rem相对于根元素，相对于根标签的好处是为了统一变化(统一控制)。

案例：将以下效果图在320屏幕上实现，效果图是使用px作为单位进行标注的，假设html标签的font-size为32px，将期转换为rem。

效果图:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <style>
        .container{
            width:320px;
            border:1px solid #ccc;
        }
        .t{
            width:320px;
            display:flex;
            padding:0 16px;
            margin-bottom:32px;
        }
        .tl{
            width:96px;
            height:192px;
            background:cyan;
        }
        .tr{
            width:192px;
            height:192px;
            background:orangered;
        }

        .bt{
            width:320px;
            height:96px;
            background:yellow;
            margin-bottom:16px;
        }
        html{
            font-size:32px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class='t'>
            <div class="tl"></div>
            <div class="tr"></div>
        </div>
        <div class="bt"></div>
    </div>
</body>
</html>

rem版本布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <style>
        .container{
            width:10rem;
            border:1px solid #ccc;
        }
        .t{
            width:10rem;
            display:flex;
            padding:0 .5rem;
            margin-bottom:1rem;
        }
        .tl{
            width:3rem;
            height:6rem;
            background:cyan;
        }
        .tr{
            width:6rem;
            height:6rem;
            background:orangered;
        }

        .bt{
            width:10rem;
            height:3rem;
            background:yellow;
            margin-bottom: .5rem;
        }

        html{
            /* 在使用rem时，将Px转换为rem时，是以html标签的font-size大小为转换的依据，html标签的font-size就是转换的基数 */

            font-size: 32px;

            /*
            rem就是一个单位，
            px到rem的转换，要除以html标签的font-size大小，这个font-size就是转换的基数。
            */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class='t'>
            <div class="tl"></div>
            <div class="tr"></div>
        </div>
        <div class="bt"></div>
    </div>
</body>
</html>

3. 使用rem的经验法则

==首先明确：==rem布局的目的就是不同的屏幕上显示的效果尽可能的一致，换句话讲就是在大屏幕上进行整体放大，小屏幕上进行整体缩小。基于这样的目的，可以看出em与rem的区别：em各自为政，不好统一控制；而rem相对于html根标签，可以方便的进行统一控制

有了rem后，就可以让页面内所有的尺寸都相对于html根标签了。

:question: 相对于根标签的好处是什么，好处是为了统一控制。统一控制的时机是什么时候呢？在不同的屏幕上显示时(屏幕不同尺寸就不同，也就意味着要进行缩放操作)。屏幕的尺寸值 要与 html标签的字体值要有关联。

==经验法则：==在实际开发中，我们并不会使用html标签的默认字体大小16px，因为16px是一个固定的值，仅通过一个16px我们得到不屏幕的大小关系。所以我们通常会以屏幕css像素的10分之1作为html标签的font-size值。

这样就人为的建立了屏幕尺寸值 与 html标签的字体值 的关联。html的字体值可以映射出当前屏幕的大小，而rem又是参照当前的html的字体值，所以整个页面的尺寸就与当前屏幕的大小成比例了。

小结：rem的使用流程

确定html根标签的font-size设置为屏幕宽度(逻辑像素)的10分之1(这个10分之1就是rem与px的比例)
根据比例将px转换为rem

以下设计稿是2x图，使用rem完成

4. vscode编辑器px to rem插件或 cssrem

在采用rem布局进行编码时，我们需要将css尺寸转换为rem，大家也感觉到了这种计算很繁琐，但是vscode编辑器中的cssrem插件为我们提供了这样的转换。

**插件的px与rem换算比例的设置 **

文件 > 首选项 > 设置搜索插件名

5. 动态设置html标签的font-size

:point_right: 以上代码虽然实现了页面效果在不同屏幕几乎完全一致。但是对于html标签的font-size的设置还是手动的，能否实现在不同页面在不同的屏幕上自动设置font-size值呢？

媒体查询

什么是媒体查询

媒体查询（Media Query）是CSS3新语法。使用 @media查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

媒体查询语法规范

用 @media开头注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

@media mediatype and|not|only (media feature) {
   CSS-Code;
}

**1. mediatype 查询类型 **

将不同的终端设备划分成不同的类型，称为媒体类型

**关键字 **

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

and：可以将多个媒体特性连接到一起，相当于“且”的意思。 not：排除某个媒体类型，相当于“非”的意思，可以省略。 only：指定某个特定的媒体类型，可以省略。

**媒体特性 **

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。

注意他们要加小括号包含

**媒体查询书写规则 **

注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写

flexible.js

:point_right: flexible.js 文件是淘宝为了自己的页面能在不同的手机屏幕上都能为html标签的字体大小设置10分之1的大小，自己书写了一个js文件，来解决这个问题。flexible.js文件，可以动态的读取屏幕的css像素，并除10，再设置给html标签的字体属性。

我们只需要下载flexible.js并引入到html文件中即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 需要设置 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script src="flexible.js"></script>
</head>
<body>
    
</body>
</html>

:point_right: 在采用rem布局进行编码时，只需要根据当前设计稿的css像素尺寸计算rem即可，不需要考虑当前设计稿在不同屏幕的情况。只需要计算出css像素与rem的对应关系，至于rem与屏幕的对应关系是由rem.js动态完成的。因为rem.js会自动根据不同的设备(不同的屏幕尺寸)，动态的获取屏幕的css像素宽度，然后除10，最后设置给html的font-size属性。

这样就形成了html主外，rem主内。html标签将当前屏幕宽度情况，读取过来以字体大小的形式保存起来。html内所有的标签再以这个字体大小为度量单位，就可以形成屏幕大了，html内的元素就相应的大了，屏幕小了html内相应元素就小了。就这么简单，html的font-size参照屏幕，内部标签参照html。

二、Less(css预处理器)

1. Less介绍及开发环境的搭建

1.1维护css弊端

CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
不方便维护及扩展，不利于复用。
CSS 没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。

1.2 什么是预处理(预编译)

Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也称为 CSS预处理器。做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。

它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

Less中文网址：Less.js 中文网

常见的CSS预处理器：Sass、Less、Stylus

一句话：Less是一门 CSS 预处理语言，它扩展了CSS的动态特性。

1.3 Less开发环境的搭建

:point_right: Less是编写css的工具，工具就需要安装才可以使用。

基于编辑器的安装方式 a. vscode编辑器 b. sublime编辑器

ctrl + shift + p 输入 less2cc 安装
独立命令安装方式(需要Node环境支持) a. 安装node环境下载 | Node.js 中文网 b. 通过node安装less工具，打开cmd窗口执行 npm install less -g c. 通过less工具对less文件进行处理

打开cmd窗口，执行 node -v 查看是否安装成功

重新打开cmd窗口、执行 less -v 查看less是否安装成功

进行less文件所在的文件夹，打开cmd 执行： lessc 需要被编译的less文件保存的css文件