移动适配（rem）

莫凡是莫烦
106 阅读3分钟

  • rem ： 目前多数企业在用的解决方案

  • vw / vh：未来的解决方案

  • rem单位：相对单位

rem(font size of the root element)单位是相对于HTML标签的字号计算结果

1rem = 1HTML字号大小 （根标签：html）

image.png

  • 因此如果用rem,首先要设置html字号

  • 不同设备分辨率不同，因此需要设置不同的html

  • 使用媒体查询设置差异化CSS样式（可写多个，不同适配结果）

image.png

image.png

  • html尺寸规定原则：

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

  • 设计稿的尺寸

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

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

2.2 rem单位的尺寸

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

使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

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

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

Less

  • Less是一个CSS预处理器, Less文件后缀是.less

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

  • 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

使用前安装插件

Easy Less : vscode插件

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

image.png

注释

  1. 单行注释（css里面不可见）
  • 语法：// 注释内容
  • 快捷键：ctrl + /
  1. 块注释

  • 语法：/* 注释内容 */

  • 快捷键： shift + alt + A

  • 运算

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

  2. 除法需要添加 小括号 或 .

.box{
    width:100/12rem;
    // 不可以
    width:(100px/12rem);

    width: (100/12rem);

}

.box {
  width: 100px/12rem;
  width: 8.33333333px;
  width: 8.33333333rem;
}
  • 注意：

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

Less嵌套

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

  • 语法：

image.png

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

image.png

变量

把颜色提前存储到一个容器，设置属性值为这个容器名

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

  • 语法：

  1. 定义变量：@变量名: 值;

  2. 使用变量：CSS属性：@变量名;

// less
@fontcolor:pink;

.box{
    color: @fontcolor;
    .son{
        color: aqua;
    }
}

//css

.box {
  color: pink;
}
.box .son {
  color: aqua;
}

Less导入

  • 写法：@import “文件路径”;
@import url(./变量.less);
@import url(./嵌套);
// 可以不写less后缀

Less导出（让css在固定文件夹中）

  • 方法一：

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

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

image.png

image.png

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

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

image.png

  • 禁止导出

    在less文件第一行添加: // out: false (类似导出方法二)

git地址

image.png

avatar
文章
阅读
粉丝