移动web总结四

大同学
238 阅读5分钟

一、移动适配

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

1.什么是rem

  • rem（font size of the root element）是指相对于根元素的字体大小的单位。rem是随画面大小而改变取值的。

2.rem的说明

  1. 相对单位
  2. rem单位是相对于HTML标签的字号计算结果
  3. 1rem = 1HTML字号大小
  4. 根据视口宽度，设置不同的HTML标签字号
  5. rem单位的尺寸 = px单位数值 / 基准根字号

3.rem页面效果

  • 屏幕宽度不同，网页元素的尺寸也会不同，等比缩放。设备宽度大，元素尺寸也大，反之亦然。

4.rem适配原理（不清楚原理的可以留言）

根据不同屏幕的宽度，以相同的比例动态修改html的font-size适配，并将px替换成rem，它可以很好的根据根元素的字体大小来进行变化，从而达到各种屏幕基本一直的效果体验。

2、flexible

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

1.作用

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

2.核心原理

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

3.使用方法（可留言）

  • 直接以JS形式引入即可

Snipaste_2022-06-03_15-53-40.png

3、媒体查询

1.作用

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

2.rem移动适配-写法

Snipaste_2022-06-03_15-52-39.png

Snipaste_2022-06-03_15-52-54.png

3.PC端-写法

Snipaste_2022-06-03_16-05-18.png

4、vw / vh：未来的解决方案

1.作用说明

  1. 相对单位
  2. 相对视口的尺寸计算结果
  3. vw：viewport width （1vw = 1/100视口宽度）
  4. vh：viewport height （1vh = 1/100视口高度）

2.vw适配原理

  1. 确定设计稿对应的vw尺寸 （1/100视口宽度）
  2. vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

3.vh适配原理

  1. 确定设计稿对应的vh尺寸 （1/100视口宽度）
  2. vh单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

注意点

  1. vw 和 vh 不能混用。
  2. vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

二、Less

1、作用说明

  1. 使用Less运算写法完成px单位到rem单位的转换
  2. Less是一个CSS预处理器, Less文件后缀是.less
  3. 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
  4. 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

2、vscode编译插件

Snipaste_2022-06-03_15-57-17.png

1.作用

  • less文件保存自动生成css文件

3、Less语法

1.注释

  • 单行注释
  1. 语法：// 注释内容
  2. 快捷键：ctrl + /
  • 块注释
  1. 语法：/* 注释内容 */
  2. 快捷键： shift + alt + A

Snipaste_2022-06-03_16-03-38.png

2.运算

  1. 加、减、乘直接书写计算表达式
  2. 除法需要添加 小括号 或 ./
  • 注意： 1.单位在表达式之中不分顺序，表达式存在多个单位以第一个单位为准
  1. 用除法时 ./ VSCode会出现报错，但Less是支持这种写法的，所以在VSCode中更推荐使用小括号
  2. 写法规范：运算符前后要么都用空格隔开，要么前后都不要空格

Snipaste_2022-06-03_15-57-41.png

  • 案例代码
// 1.生成后代选择器
.box {
  background-color: red;

  .title {
    width: 200px;
  }

  .footer {
    height: 200px;
  }
}

// 2.生成子代选择器 >
.father {
  > .son {
    color: #333;

    > .sun {
      font-size: 20px;
    }
  }
}

// 3.交集选择器 &符号指代的是直接上级
p.red {
  background-color: red;
}

p {
  &.red {
    background-color: skyblue;
  }
}

// 4.并集选择器
.box1,
.box2 {
  color: #333;
}

.box {
  .son1,
  .son2 {
    color: #000;
  }
}

// 5.伪类选择器  :hover
.box li:hover a {
  color: #666;
}
.box {
  li:hover {
    a {
      color: #333;
    }
  }
}

// &符号不生成后代选择器，表示直接上级
.box {
  li {
    span {
      &:hover {
        a {
          color: #999;
        }
      }
    }
  }
}

// 6.添加伪元素
.box {
  a::before {
    content: '';
  }

  a {
    &::after {
      content: '';
    }
  }
}

// 7.结构伪类选择器 直接写在选择器的后面是没有提示的
.header {
  li:last-child {
    margin-right: 0;
  }

  li {
    &:first-child {
      margin-left: 0;
    }
  }
}

3.嵌套

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

  • 语法：

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

Snipaste_2022-06-03_15-58-24.png

Snipaste_2022-06-03_15-58-39.png

4.变量

  1. 把颜色提前存储到一个容器，设置属性值为这个容器名
  2. 变量的作用：存储数据，方便使用和修改。
  3. 语法：1.定义变量 ：@变量名: 值; 2.使用变量： CSS属性：@变量名。

Snipaste_2022-06-03_15-58-59.png

5.Less导入文件

  1. 语法：@import “文件路径”;

Snipaste_2022-06-03_15-59-11.png

6.Less导出文件

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

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

Snipaste_2022-06-03_15-59-30.png

2.控制当前Less文件导出路径

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

Snipaste_2022-06-03_15-59-48.png

  • 注意点
  1. css导出路径，后面一定要写/，如果不写只是普通的文件名，不要分号结尾；
  2. less配置信息，一般要写在第一行

7.禁止导出文件

  1. 语法：在less文件第一行添加: // out: false

Snipaste_2022-06-03_15-59-58.png

8.压缩导出

  1. 语法：在less文件第一行添加: // compress:true,out:./

Snipaste_2022-06-03_16-13-36.png

avatar
文章
阅读
粉丝