web移动适配-CSDN博客

本文链接：https://blog.csdn.net/qq_61900577/article/details/129332069

文章介绍了rem作为网页布局单位的使用，结合媒体查询调整不同屏幕尺寸下的字体大小。同时提到了flexible框架，它根据视口宽度动态设置html的font-size。此外，还简单讨论了less预处理器，包括其嵌套、运算和变量功能在CSS编写中的优势。

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

rem：目前多数企业在用的解决方案
vw/vh：未来解决方案

1.rem

网页效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）；

单位：1rem=1HTML字号大小（5rem=html字号*5）；

1.1媒体查询

作用：为了解决设计屏幕大小不同情况下，设置不同的html标签字号，映入媒体查询，它能够检测视口的宽度，然后变成差异化的css样式。

使用媒体查询，使得不同宽度屏幕的html字号不同，但我们要如何去确定某个屏幕下它的html字号大小呢？

目前rem布局方案中，将网页等分成10份，html标签的字号为视口宽度的1/10。

1.2rem单位尺寸计算

n:n个rem

eg:计算136px是多少个rem？（设计稿适配375px视口）

n=136除37.5（html标签字号大小）=3.627

1.3flexible框架

原理：根据不同的视口宽度给网页中html根节点设置不同的font-size。

<!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>体验rem适配</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box{
            width: 5rem;
            height: 5rem;
            background-color: pink;
        }
    </style>
</head>

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

    <script src="./js/flexible.js"></script>
</body>

</html>

2.less

less是css的预处理器，文件后缀.less

2.1 写法

自动转换成（easy less 插件）

2.2 less 运算

加+
减-
乘*
除（x/y）或者x./y

2.3 less 语法

2.3.1 less嵌套生成后代选择器（方便代码迁移）

父级里面放子级

&表示当前选择器，配合hover使用

2.3.2 使用less变量设置属性值（存储数据，方便修改和使用）

以前想让多个标签设置相同css效果，则是把他们放在一个类选择器，而less采用变量的方法，把需要的效果存储到一个容器中，设置属性值为这个容器名。

语法：

// 1. 定义. 2.使用
@colora:green;

.box {
    color: @colora;
}

.father {
    background-color: @colora;
}

.aa {
    color: @colora;
}

.box {
  color: green;
}
.father {
  background-color: green;
}
.aa {
  color: green;
}