移动端Web笔记day03

移动 Web 第三题

01-移动 Web 基础

谷歌模拟器

模拟移动设备，方便查看页面效果，移动端的效果是当手机屏幕发生了变化，页面和页面中的元素也要跟着等比例变化。

在这里插入图片描述

屏幕分辨率

分类：

硬件分辨路 -> 物理分辨率：硬件分辨率（出厂设置）
缩放调节的分辨路 -> 逻辑分辨率：软件 / 驱动设置

结论：制作网页参考逻辑分辨率

在这里插入图片描述

视口

作用：显示 HTML 网页的区域，用来约束 HTML 的尺寸，一般在生成html骨架时会自动生成视口标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!– 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）

二倍图

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

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

使用方法：

在这里插入图片描述

什么是二倍图：比如说现在的设计稿是参考iPhone6/7/8，设备的宽度375px产出设计稿。而二倍图的设计稿尺寸：就是750px。

在以后的工作将二倍图变成适合开发的图片非常简单，只需要按照上面的步骤进行就可以了。直接选择二倍设计图。

上面的图片左边的是psd图片是二倍图时的处理方法，右边是html图片的处理方法。

这是在像素大厨的操作方法，在PS中的操作方法还不知道。

适配方案

宽度适配：宽度自适应，但是高度并不会随着屏幕的变化而变化。在PC端的设计就可以使用这种方式来设计，但是移动端不建议使用这种方式来设计。PC端比较适合这种适配方案。
- 百分比布局
- Flex 布局
等比适配：网页元素的宽高等比缩放，这种适配方案更加适合移动端的设计。
- rem
- vw

02-rem

简介

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

使用rem相对单位的步骤：

给HTML标签添加字号
```
html {font-size: 30px;
}
```

使用rem单位书写尺寸

.box {width: 5rem;height: 3rem;background-color: pink;
}

但是这还是不能实现rem的宽高自适应不同的屏幕，因为没有引入相对应的JS文件。有了如果全部都使用了rem相对单位，到时候直接修改html的字号就可以直接修改全部的盒子的宽高。

媒体查询

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

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

在这里插入图片描述

@media (width:320px) { // 如果检测到括号中的条件满足，就会执行{}中的css选择器html {background-color: green;}
}

注意这是没有调节屏幕缩放比的情况下将视口的宽的调节到320px，如果屏幕设置了缩放比，有可能会无法实现，因为调节缩放比后视口有可能是小数。

rem 布局

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

使用rem布局的步骤：

使用媒体查询，给不同视口的屏幕设置不同的HTML字号，代码如下图：

在这里插入图片描述

2. 使用rem单位书写尺寸

.box {width: 5rem;height: 3rem;background-color: pink;
}

flexible.js

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

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

<body>......<script src="./js/flexible.js"></script>
</body>

rem 移动适配

工作中，书写代码的尺寸要参照设计稿尺寸，设计稿中是px，但是移动端要实现宽高自适应，不能使用px，于是就有下面的处理方式。

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

rem单位尺寸

确定基准根字号

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

rem单位的尺寸

rem单位的尺寸 = px单位数值 / 基准根字号
一般是除以37.5，但是要看设计师是参考了哪一个大小的视口。

03-less

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

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

VS Code 插件：Easy LESS，保存 less文件后自动生成对应的 CSS 文件

现在只是学习less是如何使用的，到了后面学习框架之后，就会框架里面的less的用法。

只要一保存就会直接生成对应的css文件。

在这里插入图片描述

注释

单行注释
- 语法：// 注释内容
- 快捷键：ctrl + /
块注释
- 语法：/* 注释内容 */
- 快捷键： Shift + Alt + A

注意：less中的单行注释是无法直接生成在对应的css文件中的，但是多行注释可以直接在对应的css文件中生成注释。

运算

加、减、乘直接书写计算表达式
除法需要添加小括号或 .
表达式存在多个单位以第一个单位为准

在这里插入图片描述

到时候除法使用 . 的时候，在下面会有小的波浪线，表示报错，但是，这在less中是合法的，直接保存，也是可以出正确的结果的。

在表达式中最好是只用一个单位。

嵌套

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

在这里插入图片描述

提示：用 & 表示当前选择器，,代码写到谁的大括号里面就表示谁，不会生成后代选择器，通常配合伪类或伪元素使用

在这里插入图片描述

// 比如说a标签默认的字的颜色是红色，当鼠标经过时变成蓝色
.father {a {color: red;}a:hover {color: blue;}
}
// 正常的写法是上面这样的，如果需要将这一段代码迁移到其他地方，就需要将a和a:hover对应的内容全都剪切走。
// 这样做不是特别的方便，于是就用到了 & 上面的代码就变成了这样
.father {a {color: red;&:hover { // 这表示:hover伪元素不会生成a标签的子代选择器，而是就是a标签，是和a标签是一起的color: blue;}}
}// 这两种的写法都会生成一样的css代码
.father a {color: red;
}
.father a:hover {color: bule;
}

变量

概念：容器，存储数据

作用：存储数据，方便使用和修改

语法：

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

// 定义变量
@myColor: pink;
// 使用变量
.box {color: @myColor;
}
a {color: @myColor;
}

导入

比如说：现在有三个less文件，base.less，common.less，index.less，需要将他们全部引入html文件，由于浏览器不识别less文件，所以将他们全都变成对应的css文件，在通过link引入对应的css文件。这是一种方法。

第二种方法：base.less 和 common.less 不生成 css 文件，直接导入 index.less 文件，到时候直接让index.less 生成 css 文件，其他两个less不生成css文件，最后就引入 index.css 这一个css文件就行了。

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

语法：导入: @import “文件路径”;

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

@import './base.less';
@import './common';

导出

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

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

// out: ./index.css
// out: ./css/
// out: ./myCss/index.css

禁止导出

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

在这里插入图片描述

04-综合案例-极速问诊

源码地址

在这里插入图片描述

准备工作

在这里插入图片描述

HTML 结构

<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css"><body>......<script src="./js/flexible.js"></script>
</body>

less 样式

// out: ../css/@import "./base";

头部布局

HTML 结构

<!-- 头部 -->
<header>1</header>

less 样式

@rootsize: 37.5rem;
// 头部
header {display: flex;justify-content: space-between;padding: 0 (15 / @rootSize);height: (44 / @rootSize);background-color: pink;line-height: (44 / @rootSize);
}

头部内容

HTML 结构

<a href="#" class="back"><span class="iconfont icon-left"></span></a>
<h3>极速问诊</h3>
<a href="#" class="note">问诊记录</a>

less 样式

.icon-left {font-size: (22 / @rootSize);
}h3 {font-size: (17 / @rootSize);
}.note {font-size: (15 / @rootSize);color: #2CB5A5;
}

banner 区域

HTML 结构

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

less 样式

// 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;}}
}

问诊类型布局

HTML 结构

<!-- 问诊类型 -->
<div class="type"><ul><li><a href="#"><div class="pic">1</div><div class="txt">2</div><span class="iconfont icon-right"></span></a></li><li>2</li></ul>
</div>

less 样式

// 问诊类型
.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);}}
}

问诊类型内容

HTML 结构

<div class="pic"><img src="./assets/type01.png" alt="">
</div>
<div class="txt"><h4>三甲图文问诊</h4><p>三甲主治及以上级别医生</p>
</div>
<span class="iconfont icon-right"></span>

less 样式

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);
}