移动适配

2022/4/26 23:16:36

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

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

解决方案:

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

em,rem

相同点: 都是相对单位

不同点:参照对象不同

  • em是相对当前盒子文字大小
  • rem是相对于html(根标签)文字大小

适配方案

移动端的适配方案:

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

rem适配

原理

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

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

单位

单位:rem

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

媒体查询

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

写法:

媒体查询写法

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

px转rem

步骤:

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

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

  2. 计算rem单位的尺寸

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

flexible.js

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

原理

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

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

使用方法

  1. 链入js,通常写在前面
  2. 将测量的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% 区别:

  1. vw 永远是以视口的宽度为准。· 在 375设计稿下, 1vw 永远是 3.75px
  2. 百分比以父盒子为准。 假如父盒子是 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);

布局流程

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


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


扫一扫关注最新编程教程