移动适配rem

移动适配

1.rem

目标：能够使用rem单位设置网页元素的尺寸

网页效果：

Ø 屏幕宽度不同，网页元素尺寸不同（等比缩放）

rem单位：

Ø 相对单位

Ø rem单位是相对于HTML标签的字号计算结果

Ø 1rem = 1HTML字号大小

2.rem移动适配 - 媒体查询

目标：能够使用媒体查询设置差异化CSS样式

l 媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式

l 当某个条件成立, 执行对应的CSS样式

写法：

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

        /* 设备的宽度是320px，将跟标签的font-size设置为32px */
        @media (width:320px) {
            html{
                font-size: 32px;
            }
        }
        /* 设备的宽度是375px，将跟标签的font-size设置为37.5px */
        @media (width:375px) {
            html{
                font-size: 37.5px;
            }
        }
        /* 设备的宽度是414px，将跟标签的font-size设置为41.4px */
        @media (width:414px) {
            html{
                font-size: 41.4px;
            }
        }

/* 量取的宽高为30px*30px
            转为rem：用量取的宽度除以跟标签的字体大小
            30 / 37.5 =0.8
         */
        .box{
            width: 0.8rem;
            height: 0.8rem;
            background-color: pink;
        }

 3.flexible

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

2.less

1.less语法

 目标：使用Less运算写法完成px单位到rem单位的转换

l 单行注释

Ø 语法：// 注释内容

Ø 快捷键：ctrl + /

l 块注释

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

Ø 快捷键： shift + alt + A

运算：

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

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

l 注意： Ø 表达式存在多个单位以第一个单位为准

2.编译插件

目标：使用Less语法快速编译生成CSS代码

Easy Less :

l vscode插件

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

3.less

目标：使用Less语法快速编译生成CSS代码

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

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

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

4.less语法-嵌套

目标：能够使用Less嵌套写法生成后代选择器

嵌套：

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

l 语法：

 l 注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用（清除:hover前面的空格）

5.less语法-变量

目标：能够使用Less变量设置属性值

变量

l 思考：

Ø 网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码？

Ø 方法一：逐一修改属性值（太繁琐）

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

l 使用方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名

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

l 语法：

Ø 定义变量：@变量名: 值;

Ø 使用变量：CSS属性：@变量名;

6.less语法-less导入

目标：能够使用Less导入写法引用其他Less文件

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

 7.less语法-less导出

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

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

//out: ./css/

禁止导出css文件：

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