移动适配

2022/4/26 23:16:36

编程Tag： 移动 css rem 适配宽度 px vw

本文主要是介绍移动适配，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

屏幕宽度发生变化，页面元素的尺寸（宽度和高度）也随之变化，这样可以更好的达到适配效果，用户体验更好

解决方案:

百分比布局或者 flex 完成整体元素排列布局
配合 rem 或者 vw/vh 单位设置元素的尺寸（宽度/高度）最终适配

em，rem

相同点：都是相对单位

不同点：参照对象不同

em是相对当前盒子文字大小

rem是相对于html（根标签）文字大小

适配方案

移动端的适配方案：

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

rem适配

原理

rem适配原理：通过媒体查询检测视口宽度，不同视口宽度设置不同的根标签文字大小

根标签通常设置为当前屏幕的1/10

单位

单位：rem

rem是相对单位，是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小
修改html 的文字大小，就可以完成元素大小的等比例缩放

媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式，当某个条件成立, 执行对应的CSS样式

写法：

媒体查询写法

通过媒体查询，检测不同的视口宽度，设定不同的html文字大小，元素设置rem单位后，可以达到元素适配效果

px转rem

步骤：

确定设计稿对应的设备的HTML标签字号

查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
计算rem单位的尺寸

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

flexible.js

媒体查询写起来超级麻烦，而且检测不够精确，因此我们使用 flexible.js 这个 js文件，通过js 实时检测屏幕窗口的变化实现检测视口宽度。

原理

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

将当前根标签大小设置为当前屏幕大小的1/10

使用方法

链入js，通常写在前面
将测量的px值转为rem

less

Less是一个CSS预处理器(常见的预处理器还有 Sass、Stylus), Less文件后缀是.less

扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。

Easy Less

Easy Less ：vscode插件，

作用：less文件保存自动生成css文件

语法

单行注释

语法：// 注释内容

快捷键：ctrl + /
块注释

语法：/* 注释内容 */

快捷键： shift + alt + A

运算

加、减、乘直接书写计算表达式

除法需要添加小括号或 .

.box {
    width: 30px + 2;
    height: 30 + 3px;
    font-size: 10px*2;
    background-color: @baseColor;

    p {
        color: @baseColor;
        font-size: (16 / 37.5rem);

        span {
            // 表达式存在多个单位以第一个单位为准
            width: (20px / 37.5rem);
        }

    }
}

产生的.css

.box {
  width: 32px;
  height: 33px;
  font-size: 20px;
  background-color: #ff0000;
}
.box p {
  color: #ff0000;
  font-size: 0.42666667rem;
}
.box p span {
  width: 0.53333333px;
}

表达式存在多个单位以第一个单位为准

嵌套

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

语法：

less嵌套

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

我们在写伪类和伪元素的时候，经常使用 & 来代替父元素

&代表当前选择器

变量

语法：

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

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

//定义变量 @变量名: 值; 
@pinkColor: pink;

// 使用变量：CSS属性：@变量名;
.box {
    background-color: @pinkColor;
}

导出的.css

.box {
  background-color: pink;
}

less导入

语法：

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

以英文分号结尾

// less导入
//导入: @import “文件路径”;
@import './less01.less';
@import './less02';

less导出

方法一：配置EasyLess插件，实现所有Less有相同的导出路径

配置EasyLess插件：设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码"out": "../css/"（注意，必须是双引号）

配置EasyLess插件

方法二：控制当前Less文件导出路径

Less文件第一行添加如下代码, 注意文件夹名称后面添加 /

下面的只写一个就可以，且必须写在第一行，注释写在下面

同一文件夹下，创建一个css文件夹（有css文件夹时直接导出），导出与less同名的.css

// out: ./css/

同一文件夹下，创建一个css文件夹（有css文件夹时直接导出），导出less05.css

// out: ./css/less05.css
```
// out: ./css/
```
```
// out: ./css/less05.css
```
less禁止导出

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

// out: false

vw/vh适配

单位

单位：vw/vh

vw /vh是个相对单位。
1vw =1/100屏幕宽度 1vh = 1/100屏幕高度

不管在什么屏幕下，我们把屏幕分为平均的 100等份。

1vw 和 1% 区别：

vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是 3.75px

百分比以父盒子为准。假如父盒子是 200px，则 1% 是 2px

px 如何转为vw

我们设计稿是 iphone 678 是 375px， vw 把屏幕划分了100等份，则 1vw = 3.75 px

有个盒子啊，我测量了下，他的宽度是 3.75px * 3.75px ，则写成 vw 是多少？ 1vw * 1vw

又一个盒子，宽度和高度分别是 37.5px 和 37.5px ，则转换为vw 是多少？ 10vw * 10vw

有一个盒子 68px * 29px ，则我们写代码 less vw ？

width: (68 / 3.75vw);
height: (29 / 3.75vw);

布局流程

根据设计稿确定1vw尺寸
px单位转换成vw单位尺寸: px值 / (1/100视口宽度) vw

这篇关于移动适配的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！