网页适配rem与vw，及less学习

忘星 . *

已于 2023-11-19 19:02:05 修改

阅读量429

点赞数 6

文章标签： less 学习前端 css

于 2023-11-19 18:56:59 首次发布

本文链接：https://blog.csdn.net/weixin_51473175/article/details/134493113

版权

概念

rem 和 vw 都是用于网页设计的CSS单位，在移动端适配方面，我们经常会用到它。

rem（root em）是一个相对长度单位，但只相对于根元素，可以简单的通过更改根元素大小，从而调整所有字体大小。通常与scss、less、postcss等预编译器相结合。

vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位，是css3的一部分，基于视图窗口的单位，除了vw、vh还有vmin、vmax。

Less，是CSS预处理器，也是一门向后兼容的CSS扩展语言。它是在CSS语言基础上增加了一些方便的扩展，如变量、混合（mixin）、函数等功能，使得CSS更易维护、方便制作主题和扩充。这里用来与rem结合使用。

移动网页适配——rem与vw

HTML网页适配

视口属性

保证html网页在不同分辨率尺寸中自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

作用：显示 HTML 网页的区域，用来约束 HTML 的尺寸

width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）

比如，在iPhone6/7/8 Puls与iPhone6/7/8中html中尺寸不同

在这里插入图片描述

网页元素要适配不同的屏幕

在网页中如果给定一个元素固定px的长宽，在网页缩放或切换不同大小及分辨率设备中，会出现元素无法随设备大小的变化而变化，所以除了Flex及百分比布局外，CSS还引入了两个特殊的单位rem、vw/vh

适配方案

宽度适配：宽度自适应
- 百分比布局
- Flex 布局
等比适配：宽高等比缩放
- rem
- vw

宽度适配无法等比例缩放，在移动端不合适，故不考虑

rem适配

rem单位，是相对单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小

对于不同尺寸的屏幕，要用不同大小的单位

这里需要通过媒体查询来判断屏幕的大小

媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式

当某个条件成立, 执行对应的CSS样式

写法一：

/*完整写法*/
@media 媒体类型 关键词 (媒体特性) {
    选择器 {
        CSS属性
    }
}
媒体类型：screen屏幕（默认）、print打印预览、speech阅读器、all不分区别类型
关键词：and、only、not
媒体特性：height、width、max-height、max-height、orientation等


/*简略写法*/
@media (媒体特性) {
    选择器 {
        CSS属性
    }
}

/*使用and逻辑操作符。横屏和最小宽度为500px时生效*/
@media (min-width: 700px) and (orientation: landscape) {
    body {
        background-color: red;
    }
}
/*使用not逻辑操作符，只有在大于400px时生效*/
@media only screen and(max-width:300px) {
    body { 
        background-color: aqua;
    }
}
/*使用only逻辑操作符，只有在小于等于300px时生效*/
@media only screen and(max-width:300px) {
    body { 
        background-color: yellow;
    }
}

/*小于等于300px时生效*/
@media (max-width:300px) {
    body {
        background-color: pink;
    }
}
/* 同时实现多个尺寸效果时，要有书写顺序，min-width从小到大，max-width从大到小 */

写法二：

当要写的CSS样式过多，推荐外部导入CSS文件的写法

/*写法*/
<link rel="stylesheet" media="(媒体特性)" href="css文件路径">


<link rel="stylesheet" media="(max-width: 768px)" href="./媒体查询.css">

rem 布局

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

@media (width: 375px) {
    html {
        font-size: 37.5px;

    }
}

@media (width: 414px) {
    html {
        font-size: 41.4px;
    }
}

@media (width: 390px) {
    html {
        font-size: 39px;
    }
}

rem 移动适配

rem单位尺寸

确定基准根字号

查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）

rem单位的尺寸

rem单位的尺寸 = px单位数值 / 基准根字号

/*
设计图中，盒子的宽高
width: 112.5px;
height: 187.5px;

在宽度375的页面中，需要与37.5相除之后，才能写入页面中的width和height中
且由于css不支持计算，我们只能外面算好写进去，非常麻烦
下面会引入less预编译来解决这个问题
*/

@media (width: 375px) {
    html {
        font-size: 37.5px;

    }
}

.box {
    width: 3rem;
    height: 5rem;
    background: blue;
}

引用flexible.js

在项目中一旦要设置多个尺寸对应样式，手写媒体查询就会非常繁琐，所以我们都会直接引用flexible.js

flexible.js 是手淘开发出的一个用来适配移动端的 js 库。

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

/*一般我们直接引用这个js文件*/
<script src="./js/flexible.js"></script>

/*如以下示例*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* @media (width: 375.33px) {
            html {
                font-size: 37.5px;
            
            }
        }*/

        .box {
            width: 3rem;
            height: 5rem;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box"></div>

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

less入门

Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力

由于浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件

在VS Code中有一款插件：Easy LESS，可保存 less文件后自动生成对应的 CSS 文件

在这里插入图片描述

语法

同CSS语法一样，扩充了CSS功能
单行注释：// 注释内容（在生成的css文件中不显示）
块注释：/* 注释内容 */

变量

概念：容器，存储数据

作用：存储数据，方便使用和修改

语法：

定义变量：@变量名: 数据;
使用变量：CSS属性：@变量名;

/* 定义变量 */
@rootSize:37.5rem;
// 使用变量
.box {
	width: (200/@rootSize);
    height: (150/@rootSize);
}

运算

加、减、乘直接书写计算表达式
除法需要添加小括号或 .
表达式存在多个单位以第一个单位为准

下面为在less中写入，自动输出css样式，具有运算能力

less写入

.box {
    width:100+20px;
    height: 200-20px;
    width: 10*20px;
    //除法
    height: (200/5rem);
    height: 200 ./ 5rem;
}

css输出

.box {
    width:120px;
    height: 180px;
    width: 200px;
    //除法
    height: 40rem;
    height: 40rem;
}

嵌套

作用：快速生成后代选择器

.父级选择器 {
    // 父级样式
    .子级选择器 {
        // 子级样式
    }
}

在这里插入图片描述

当用 & 表示当前选择器，不会生成后代选择器，通常配合伪类或伪元素使用

在这里插入图片描述

导入

less文件中可以导入其他less文件

作用：导入 less 公共样式文件

语法：导入: @import “文件路径”;

提示：如果是 less 文件可以省略后缀

@import './base.less';
@import './common';

导出

在 less 文件的第一行添加 // out: 存储URL

提示：文件夹名称后面添加 /

// out: ./index.css
// out: ./css/

禁止导出

写法：在 less 文件第一行添加: // out: false

 // out: false

vw适配

vw和vh基本使用

vw和vh是相对单位，相对视口尺寸计算结果

vw：viewport width（1vw = 1/100视口宽度）
vh：viewport height ( 1vh = 1/100视口高度 )

vw布局

vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )

//采用375*667屏幕

/* px转vw单位 */
.box {
    width: (68/3.75vw);
    height: (29/3.75vw);
    background-color: aqua;
}


/* px转vh单位 */
.box {
    width: (68/6.67vh);
    height: (29/6.67vh);
    background-color: rgb(93, 0, 255);
}