12_移动端基础 + 移动适配 rem + Less 预处理器

01_移动端基础

01_谷歌模拟器

02_分辨率 + 视口 + 二倍图

01_屏幕分辨率

屏幕分辨率: 纵横向上的像素点数, 单位是 px

PC 分辨率

1920 * 1080
1366 * 768

缩放 150%

1920 / 150%
1080 / 150%

总结

硬件分辨率 ==> 物理分辨率 (出厂设置)
缩放调节的分辨率 ==> 逻辑分辨率 (软件 / 驱动设置)

02_视口

手机屏幕尺寸不同, 网页宽度均为 100%

网页的宽度和逻辑分辨率尺寸相同

视口标签

视口: 显示 HTML 网页的区域, 用来约束 HTML 尺寸
width=device-width: 视口宽度 = 逻辑分辨率
initial-scale=1.0: 缩放 1 倍 (不缩放)

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- 1.视口标签: 规定 HTML 的尺寸, 让 HTML 的宽度 = 逻辑分辨率的宽度 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>

</html>

03_二倍图

概念: 设计稿里面每个元素的尺寸的 倍数

作用: 防止图片在高分辨率屏幕下模糊失真

现阶段设计稿参考 iPhone6/7/8, 设备宽度 375px 产出设计稿

二倍图设计稿尺寸: 750px

02_移动适配 rem

01_适配方案介绍

宽度适配: 宽度自适应 (PC 端)

百分比布局
Flex 布局

等比适配: 宽高等比缩放 (移动端)

rem
vw

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .toolbar {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 50px;
      background-color: pink;
    }

    /* 1.Flex 布局 / 百分比布局: 可以实现 PC 端适配效果 (宽度自适应) */
    .toolbar ul {
      display: flex;
    }

    .toolbar li {
      width: 25%;
      height: 50px;
      text-align: center;
    }

    .toolbar img {
      height: 50px;
    }
  </style>
</head>

<body>
  <div class="toolbar">
    <ul>
      <li>
        <a href="#"><img src="./images/index.png" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="./images/classify.png" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="./images/car.png" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="./images/login.png" alt="" /></a>
      </li>
    </ul>
  </div>
</body>

</html>

02_rem 的使用

01_rem 的使用

rem 单位, 是 相对单位
rem 单位是相对于 HTML 标签的字号 计算结果
1rem = 1HTML 字号大小

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 1.给 HTML 标签加字号 */
    html {
      font-size: 30px;
    }

    /* 2.使用 rem 单位书写尺寸 */
    .box {
      width: 5rem;
      height: 3rem;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

03_媒体查询配合 rem

01_媒体查询

手机屏幕大小不同, 分辨率不同, 如何设置不同的 HTML 标签字号?

媒体查询

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

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

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 1.视口宽度是 375, 网页背景色是绿色 */
    @media (width: 375px) {
      body {
        background-color: green;
      }
    }
  </style>
</head>

<body>

</body>

</html>

02_媒体查询配合 rem

设备宽度不同, HTML 标签字号设置多少合适?

设备 宽度大, 元素 尺寸大
设备 宽度小, 元素 尺寸小

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

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 1.使用媒体查询, 给不同视口的屏幕设置不同的 HTML 字号 */
    @media (width:320px) {
      html {
        font-size: 32px;
      }
    }

    @media (width:375px) {
      html {
        font-size: 37.5px;
      }
    }

    @media (width:414px) {
      html {
        font-size: 41.4px;
      }
    }

    /* 2. 使用 rem 单位书写尺寸 */
    .box {
      width: 5rem;
      height: 3rem;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

04_flexible 配合 rem

01_flexible 配合 rem

flexible.js 是手淘开发出的一个用来 适配移动端 的 js 库

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

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }
  
    /* 2.使用 rem 单位书写尺寸 */
    .box {
      width: 5rem;
      height: 3rem;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box"></div>

  <!-- 1.flexible.js 是手淘开发出的一个用来 适配移动端 的 js 库 -->
  <script src="./js/flexible.js"></script>
</body>

</html>

02_移动适配 rem

目标: 计算 68px 是多少个 rem? (设计稿适配 375px 视口)

N * 37.5 = 68px
N = 68px / 37.5

rem 单位尺寸

确定基准根字号
查看 设计稿宽度 ==> 确定参考 设备宽度 (视口宽度) ==> 确定 基准根字号 (1/10 视口宽度)
rem 单位的尺寸
rem 单位的尺寸 = px 单位数值 / 基准根字号

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 1.宽 68px 高 29px, 适配 375px 视口 */
    div {
      width: 1.813rem;  /* 68px 除以 37.5 */
      height: 0.773rem;  /* 29px 除以 37.5 */
      background-color: pink;
    }
  </style>
</head>

<body>
  <div></div>

  <!-- flexible.js 是手淘开发出的一个用来 适配移动端 的 js 库 -->
  <script src="./js/flexible.js"></script>
</body>

</html>

03_Less 预处理器

01_简介 + 注释

01_简介

Less 是一个 CSS 预处理器, Less 文件后缀是 .less; 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性, 计算能力

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

VSCode 插件: EaSy LESS, 保存 less 文件后 自动 生成对应的 CSS 文件

02_注释

单行注释

语法: // 注释内容
快捷键: ctrl +/

块注释

语法: /* 注释内容 */
快捷键: Shift + Alt + A

less

// /code/test.less

// 单行注释

/* 
  这是块注释
  允许换行
*/

02_运算

01_运算

加, 减, 乘直接书写计算表达式
除法 需要添加 小括号 或 .

less

// /code/test.less

.box {
  width: 100 + 20px;
  width: 100 - 80px;
  width: 100 * 2px;

  // 1.除法 ==> / 需要添加小括号 或 ./ ==> 推荐使用小括号
  width: (68 / 37.5rem);
  width: 29 ./ 37.5rem;

  // 2.如果表达式有多个单位, 最终 css 里面以第一个单位为准
  height: (29px / 37.5rem);  // height: 0.77333333px;
}

03_嵌套

01_嵌套

作用: 快速生成 后代 选择器

less

// /code/test.less

.father {
  color: red;

  .son {
    width: 200px;

    a {
      color: green;

      // 1.& 表示的是当前选择器, 代码写到谁的大括号里面就表示谁; 配合 hover 伪类或 nth-child 结构伪类使用
      &:hover {
        color: blue;
      }
    }
  }
}

自动转换为 CSS 代码

css

/* /code/test.css */

.father {
  color: red;
}
.father .son {
  width: 200px;
}
.father .son a {
  color: green;
}
.father .son a:hover {
  color: blue;
}

04_变量

01_变量

概念: 容器, 存储数据

作用: 存储数据, 方便 使用 和 修改

语法:

定义变量: @变量名: 数据;
使用变量: CSS 属性: @变量名;

less

// /code/test.less

// 1.定义变量
@myColor: green;

// 2.使用变量
div {
  color: @myColor;
}

p {
  background-color: @myColor;
}

a {
  color: @myColor;
}

自动转换为 CSS 代码

css

/* /code/test.css */

div {
  color: green;
}
p {
  background-color: green;
}
a {
  color: green;
}

05_导入 + 导出

01_导入

作用: 导入 less 公共样式文件

语法:导入: @import "文件路径";

提示: 如果是 less 文件可以省略后缀

less

// /code/test.less

// 1.导入 less 公共样式文件
@import "./08_less-体验.less";

// 2.如果是 less 文件可以省略后缀
@import "./09_less-注释";

自动转换为 CSS 代码

css

/* /code/test.css */

.father {
  color: red;
  width: 1.81333333rem;
}
.father .son {
  height: 0.77333333rem;
}
/* 
  这是块注释
  允许换行
*/

02_导出

写法: 在 less 文件的 第一行 添加 // out: 存储 URL

提示: 文件夹名称后面添加 /

less

// 3.导出 ./文件夹/css 文件名
// out: ./mycss/index.css

// 2.导出 ./文件夹/当前文件名.css
// out: ./css/

// 1.导出 css 文件名
// out: ./index.css

03_禁止导出

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

less

//  1.禁止导出
// out: false

04_极速问诊

01_准备工作

项目目录
设计稿

html

<!-- /code/index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>极速问诊</title>
</head>

<!-- 1.导入字体图标和样式 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css">

<body>

  <!-- 2.flexible.js 是手淘开发出的一个用来 适配移动端 的 js 库 -->
  <script src="./js/flexible.js"></script>
</body>

</html>

02_头部区域

01_头部区域

html

<!-- /code/index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>极速问诊</title>
</head>

<!-- 导入字体图标和样式 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css">

<body>
  <!-- 1.头部区域 -->
  <header>
    <a href="#" class="back"><span class="iconfont icon-left"></span></a>
    <h3>极速问诊</h3>
    <a href="#" class="note">问诊记录</a>
  </header>

  <!-- flexible.js 是手淘开发出的一个用来 适配移动端 的 js 库 -->
  <script src="./js/flexible.js"></script>
</body>

</html>

less

// /code/less/index.less

// 2.定义变量
@rootSize: 37.5rem;

// 3.头部区域
header {
  display: flex;
  justify-content: space-between;
  padding: 0 (15 / @rootSize);
  height: (44 / @rootSize);
  // background-color: pink;
  line-height: (44 / @rootSize);

  .icon-left {
    font-size: (22 / @rootSize);
  }

  h3 {
    font-size: (17 / @rootSize);
  }

  .note {
    font-size: (15 / @rootSize);
    color: #2CB5A5;
  }
}

01_banner 区域

html

<!-- /code/index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>极速问诊</title>
</head>

<!-- 导入字体图标和样式 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css">

<body>
  <!-- 头部区域 -->
  <!-- ...... -->

   <!-- 1.banner 区域 -->
   <div class="banner">
    <img src="./assets/entry.png" alt="">
    <p><span>20s</span> 快速匹配专业医生</p>
  </div>

  <!-- flexible.js 是手淘开发出的一个用来 适配移动端 的 js 库 -->
  <script src="./js/flexible.js"></script>
</body>

</html>

less

// /code/less/index.less

// 2.banner 区域
.banner {
  margin-top: (30 / @rootSize);
  margin-bottom: (34 / @rootSize);
  text-align: center;

  img {
    margin-bottom: (18 / @rootSize);
    width: (240 / @rootSize);
    height: (206 / @rootSize);
  }

  p {
    font-size: (16 / @rootSize);

    span {
      color: #16C2A3;
    }
  }
}

04_问诊类型

01_问诊类型

html

<!-- /code/index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>极速问诊</title>
</head>

<!-- 导入字体图标和样式 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css">

<body>
  <!-- 头部区域 -->
  <!-- ...... -->

   <!-- banner 区域 -->
   <!-- ...... -->

   <!-- 1.问诊类型 -->
  <div class="type">
    <ul>
      <li>
        <a href="#">
          <div class="pic">
            <img src="./assets/type01.png" alt="">
          </div>
          <div class="txt">
            <h4>三甲图文问诊</h4>
            <p>三甲主治及以上级别医生</p>
          </div>
          <span class="iconfont icon-right"></span>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="pic">
            <img src="./assets/type02.png" alt="">
          </div>
          <div class="txt">
            <h4>普通图文问诊</h4>
            <p>二甲主治及以上级别医生</p>
          </div>
          <span class="iconfont icon-right"></span>
        </a>
      </li>
    </ul>
  </div>

  <!-- flexible.js 是手淘开发出的一个用来 适配移动端 的 js 库 -->
  <script src="./js/flexible.js"></script>
</body>

</html>

less

// /code/less/index.less

// 2.问诊类型
.type {
  padding: 0 (15 / @rootSize);

  li {
    margin-bottom: (15 / @rootSize);
    padding: 0 (15 / @rootSize);
    height: (78 / @rootSize);
    border: 1px solid #EDEDED;
    border-radius: (4 / @rootSize);

    a {
      display: flex;
      align-items: center;
      // 内容在 78 里面垂直居中
      height: (78 / @rootSize);

      img {
        margin-right: (14 / @rootSize);
        width: (40 / @rootSize);
        height: (40 / @rootSize);
      }

      .txt {
        flex: 1;

        h4 {
          font-size: (16 / @rootSize);
          color: #3C3E42;
          line-height: (24 / @rootSize);
        }

        p {
          font-size: (13 / @rootSize);
          color: #848484;
        }
      }

      .iconfont {
        font-size: (16 / @rootSize);
      }
    }
  }
}

12_移动端基础 + 移动适配 rem + Less 预处理器 ​

01_移动端基础 ​

01_谷歌模拟器 ​

02_分辨率 + 视口 + 二倍图 ​

02_移动适配 rem ​

01_适配方案介绍 ​

02_rem 的使用 ​

03_媒体查询 配合 rem ​

04_flexible 配合 rem ​

03_Less 预处理器 ​

01_简介 + 注释 ​

02_运算 ​

03_嵌套 ​

04_变量 ​

05_导入 + 导出 ​

04_极速问诊 ​

01_准备工作 ​

02_头部区域 ​

03_banner 区域 ​

04_问诊类型 ​

12_移动端基础 + 移动适配 rem + Less 预处理器

01_移动端基础

01_谷歌模拟器

02_分辨率 + 视口 + 二倍图

02_移动适配 rem

01_适配方案介绍

02_rem 的使用

03_媒体查询配合 rem

04_flexible 配合 rem

03_Less 预处理器

01_简介 + 注释

02_运算

03_嵌套

04_变量

05_导入 + 导出

04_极速问诊

01_准备工作

02_头部区域

03_banner 区域

04_问诊类型