移动web 第三章-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51666153/article/details/144643229

B站《前端Web开发HTML5+CSS3+移动web视频教程》第十三天和十四天课程学习：移动适配

一、rem适配方案

1.简介

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

2.设置不同的HTML标签字号

手机屏幕大小不同，分辨率不同，可以通过媒体查询检测视口的宽度，然后编写差异化的CSS样式。在rem布局方案中，将网页等分成10份，html标签的字号为视口宽度的1/10。

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

    <style>
        @media (width:375px) {
            body {
                background-color: green;
            }
        }
    </style>

提示：需要电脑的分辨率是100%的情况下，谷歌浏览器的模拟器显示的375px才是标准的，否则会带有小数点

3.rem-flexible.js的作用和使用

（1）作用：flexible.js是手淘开发出的一个用来适配移动端的js库，核心原理就是根据不同的视口宽度给网页中额度html根节点设置不同的font-size
（2）使用：
在body的结尾引用

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

4.rem单位尺寸转换

（1）确定基准跟字号
查看设计稿宽度（一般适配为375px视口）→ 确定参考设备宽度（视口宽度）→ 确定基准跟字号（1/10视口宽度）
（2）rem单位的尺寸（通过less实现）
rem单位的尺寸=px单位数值/基准跟字号

二、less

1.less简介

Less是一个css预处理器，Less文件的后缀是.less，它扩充了css语言，是css具备一定的逻辑性、计算能力。浏览器不识别Less代码，目前阶段，网页要引入对应的css文件。VScode插件：Easy LEss，保存less文件后自动生成对应的css文件。

2.less注释

①单行注释：//注释内容，快捷键：Ctrl+/
②块注释：/*注释内容*/
单行注释不可以生成对应的css注释

3.less运算

①加、减、乘直接书写计算表达式
②除法需要添加小括号或者.

width:(100/ 37.5rem)
width:100 ./ 37.5 rem

如果less文件的计算表达式中有多个单位，对应的css文件中的最终计算结果会以第一个单位为准。

4.less嵌套

快速生成后代选择器，&符号表示当前选择器，写到谁的大括号里面就表示谁，不会生成后代选择器，一般是配合hover伪类或者是结构伪类选择器使用
less文件

.father {
    color: red;
    .son {
        width: 200px;
        color: pink;
    }
    &:hover {
        width: 100px;
        height: 100px;
    }
}

对应的css文件

.father {
  color: red;
}
.father .son {
  width: 200px;
  color: pink;
}
.father:hover {
  width: 100px;
  height: 100px;
}

5.less变量

（1）作用：less变量用于存储数据，方便使用和修改
（2）语法：
①定义变量：@变量名：数据；
②使用变量：css属性：@变量名；

//定义变量
@myColor: pink;

//使用变量
.box {
   color: @myColor;
   }

6.less导入less文件中

（1）语法：导入：@import "文件路径”；
（2）提示：如果是less文件可以省略后缀

@import "./base";

7.less导出

（1）语法：在less文件的第一行添加：// out: 存储URL
（2）提示：
①语句的结尾没有分号
②如果是要改变最后生成的css文件名字，最后应该是想要的css文件名// out: ./index.css
③如果是要改变存储路径，语句的结尾要加“/”：// out: ./css/

8.less禁止导出

有的less文件不需要生成对应的css文件
语法：在less文件的第一行添加：//out: false

三、vw适配方案

1.vw简介

①vw和vh是相对单位，相对于逻辑视口尺寸的计算结果。
②vw：viewport wodth 1vw=1/100视口宽度
③vh：viewport height 1vh=1/100视口高度
④提示：vw和vh不能混用

2.vw布局

（1）确定设计稿对应的vw尺寸
查看设计稿宽度→ 确定参考设备宽度（视口宽度）→ 确定vw尺寸（1/100视口宽度）
（2）vw单位的尺寸=px单位数/(1/100视口宽度)