5.rem适配和less

最新推荐文章于 2024-04-13 21:21:47 发布

一颗胖头橙子

最新推荐文章于 2024-04-13 21:21:47 发布

阅读量491

点赞数

文章标签： less 前端 html css

本文链接：https://blog.csdn.net/m0_72430529/article/details/125952723

版权

移动端的适配方案：

flex + rem单位做适配效果（比如淘宝和小米移动端）当前市场最多
flex + viewport width /vh单位做适配效果（比如 B站移动端）新兴，马上的一个趋势

让flex做布局（盒子摆放），让rem或者vw/vh 实现网页元素的尺寸（宽度和高度）适配屏幕

1.rem适配

1.rem单位

rem是一个相对单位
它是相对于html标签字号大小计算结果
1rem=1html字号大小(默认字号大小为16px)
所以我们只需要修改html的字号大小,就可以完成元素的等比例缩放.

        .box {
            width: 10rem;
            height: 10rem;
            background-color: pink;
        }

        /* 使用场景:html字体大小变化,页面跟着一起变化,单位使用rem */
        html {
            font-size: 100px;
        }

此时box的宽为1000像素,高为1000像素.

2.媒体查询

做rem适配就是为了让网页的内容在不同屏幕大小的设备下都能够显示相对应的内容大小,所以我们需要给不同的大小的屏幕设置不同的HTML字体大小,然后让有rem单位的元素可以相对于html字体等比例缩放,媒体查询就是可以检测到不同的大小的屏幕给它设置html字体大小

写法:

@media (媒体特性) { 选择器 {CSS属性} }

        /* 检测屏幕大小使用媒体查询@media */
        /* 检测屏幕在320px时,body标签变成绿色 且字体大小设为32px */
        @media (width:320px) {
            body {
                background-color: green;
                font-size: 32px;
            }
        }

        /* 检测屏幕在375px时,body标签变成粉色 且给字体大小设为40px */
        @media (width:375px) {
            body {
                background-color: pink;
                font-size: 40px;
            }
        }

现在市面上的移动设备众多,各个手机的分辨率都不同,我们怎么样才能知道不同大小的设备html的字体大小该设置多大的呢?

为了方便计算我们一般把网页分为10等份,HTML标签的字号为视口宽度的1/10

我们制作移动端页面一般是以iPhone6/7/8作为参考,它的逻辑分辨率是375px,所以其HTML标签的字号则设为37.5px(我们通常把这个值称为基准根字号).

确定了HTML字体字号就要计算元素的rem值,rem值是由设计稿给的元素的测量值/html字体大小.

公式为:rem单位尺寸=px单位数值/基准根字号

3.flexible.js

但这样使用媒体查询去设置每个不同屏幕的字体大小非常不方便,因为每个不同的屏幕宽度都要去添加一个媒体查询,为了简化代码我们就需要引入一个js,有了这个js文件，可以帮我们自动检测屏幕宽度，自动修改html文字大小，这样就可以让盒子配合rem完成适配。

<style>
    .box {
            /* rem=测量值/根字号(37.5参考标椎就是) */
             width: 6.66rem;
             height: 5.6rem;
             background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <!-- flexible  原理:通过媒体查询设置html标签字体大小,以后就不需要我们再去写媒体查询了 -->
    <!-- js放在body标签的结束标签的上面   (浏览器解析都是从上往下执行) -->
    <script src="./js/flexible.js"></script>
</body>
<!-- 需求:我们的测量值是250px*210px -->

rem的个人理解总结:

rem是一个单位名称,它的作用是解决移动端适配问题,效果就是当网页的内容在宽高不同的移动设备中显示时,它会随着宽高不同而变化.

rem单位会随着html的字体大小而变化,例如html字体设置32px,宽度设10rem就是表示元素宽为320px(就是用字体大小*rem宽度)(默认不设字体大小,字体大小为16像素).

现在我们希望能在不同宽度的移动设备中显示不同的宽度的元素就要添加媒体查询样式,

@media (width:375px) {

html {

设置html字体大小屏幕分成10等份

font-size: 37.5px;

}

这个标签的意思就是查找到宽度为375px的屏幕,将他的html的字体大小设为37.5px(这个字体大小是是根据屏幕大小来设的,就是将屏幕宽的除以10就好了)设置好字体大小就去设置元素的rem宽度,计算rem宽度就是用设计师给的标椎搞里的测量值除以HTML的字体大小即可

2.less

大家在写rem适配是会发现一个非常麻烦的问题就是css不支持计算写法,以致于每次计算rem的值时都非常的不方便,这就要通过less来解决这一问题

less是VScode的一个插件,是一个CSS预处理器,Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
常见的预处理器还有 Sass、Stylus
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
在vscode设置里找到settings.json 在这里面添加一段代码就可以使得less文件在ctrl+s保存时,自动生成一个less对应的css文件(如下图片)

1.less的注释

less的单行注释快捷键和css一样也是ctrl+/,但是在less里标注的单行注释转为css文件时显示不出来

多行注释快捷键是shift+alt+a,多行注释的样子和css的注释一样,它转成css文件可以看到.

2.less的计算

计算以第一个单位为准，尽量写到最后一个数字上。比如
```
 height: (100 / 37.5rem);
```
除法比较特殊，必须添加小括号。
计算别忘了先乘除后加减

3.less的嵌套

less的样式

// 用less写后代选择器
.box {
    .son {
        p {
            color:red;
            span {
                color: #000;
                a {
                    color: #000;
                }
            }
        }
    }
}
// 现在less里面伪类选择器
// &当前包裹他的选择器
.box {
    a {
        &:hover {
            color: pink;
        }
    }
}
.one {
    a {
        &::after {
            content: '';
            color: blue;
        }
    }
}
// &符号一般配合和over和伪元素一起使用
.two {
    a {
        &:hover::before {
            content: '';
        }
    }
}

css的样式

.box .son p {
  color: red;
}
.box .son p span {
  color: #000;
}
.box .son p span a {
  color: #000;
}
.box a:hover {
  color: pink;
}
.one a::after {
  content: '';
  color: blue;
}
.two a:hover::before {
  content: '';
}

4.less的变量

5.less的导入

less可以导入其他less文件,可以使当前less文件也有其他less文件的属性

// less的导入
// less文件的导入功能,导入less文件

// 第一种写法
@import url(./04-less的嵌套.less);
@import url(./03-less的计算.less);

// 第二种写法
@import './05-less变量.less';

盒子居中案例

效果:

6.less的禁止导出

只要在less文件的第一行写上// out:false 即可

// out:false
// 禁止导出  不让你生成css文件  
.box {
    background-color: yellow;
}