当前位置：首页 > news >正文

Web前端—移动Web第三天（移动Web基础、rem、less、综合案例—极速问诊）

news 2026/2/13 9:50:18

版本说明

当前版本号[20231120]。

版本	修改说明
20231120	初版

本课程的笔记已经更新完毕，各位可以通过点击《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》学习笔记总目录查看所有知识点，同时也能免费下载学习笔记和配套资料。

版本说明
目录
移动 Web 第三天
- 01-移动 Web 基础
- - 谷歌模拟器
  - 屏幕分辨率
  - 视口
  - 二倍图
  - 适配方案
- 02-rem
- - 简介
  - 媒体查询
  - rem 布局
  - flexible.js
  - rem 移动适配
- 03-less
- - 注释
  - 运算
  - 嵌套
  - 变量
  - 导入
  - 导出
  - 禁止导出
- 04-综合案例-极速问诊
- - 准备工作
  - 头部布局
  - 头部内容
  - banner 区域
  - 问诊类型布局
  - 问诊类型内容

移动 Web 第三天

01-移动 Web 基础

谷歌模拟器

模拟移动设备，方便查看页面效果

1681811083202

屏幕分辨率

分类：

物理分辨率：硬件分辨率（出厂设置）
逻辑分辨率：软件 / 驱动设置

结论：以后编写代码时就要参考 逻辑分辨率 来制作了。

1681811157520

视口

作用：显示 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倍（不缩放）

二倍图

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

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

使用方法：

适配方案

宽度适配：宽度自适应
- 百分比布局
- Flex 布局
等比适配：宽高等比缩放
- rem
- vw

02-rem

简介

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

如：此时我们给html标签大小为font-size:30px ，而width:5rem; height: 3rem;最后盒子在移动端显示的大小就是（30* 5）*（30*3）=150 * 90 pxc 了。
1rem = 1HTML字号大小

1、看看是否能等比例缩小/放大，看移动端的适配效果

<!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>div{width: 5rem;height: 5rem;background-color: pink;}</style>
</head>
<body><div> </div><script src="../js/flexible.js"></script>
</body>
</html>

就可以发现可以等比例缩小了。

媒体查询

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

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

1681811369469

@media (width:320px) {html {background-color: green;}
}

通过对比，可以看到，符合视口宽度的背景颜色才会变成绿色，不符合的不会。

rem 布局

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

1681811438512

flexible.js

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

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

【意思主要是在自己写代码的时候就不用自己写媒体查询了。】

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

rem 移动适配

rem单位尺寸

确定基准根字号

查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
目前大部分视口宽度为375，所以基准根字号可以旋转37.5

rem单位的尺寸

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

在上面我们可以看到，求rem的尺寸特别的麻烦，每一个都要除以37.5，这时我们就可以使用less去统一的操作。

03-less

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

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

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

1681811545628

注释

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

运算

加、减、乘直接书写计算表达式
除法需要添加 小括号 或 . （注：但使用 . 这种用法的话，会出现红色波浪线，易让你以为是报错的代码提示）
表达式存在多个单位以第一个单位为准

1681811616094

嵌套

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

1681811640347

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

1681811659709

如下图所示：

有例外，如：&表示的是当前选择器，代码写到谁的大括号里面就表示谁，不会生成后代选择器。

变量

概念：容器，存储数据

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

语法：

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

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

导入

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

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

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

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

注：这里是在less文件中导入别的less文件哦，并不是在html文件中导入！html文件是不可以导入less文件的，可以把less文件转成css文件才能进行导入！

导出

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

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

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

禁止导出

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

1681811772496

04-综合案例-极速问诊

1681811796608

准备工作

1681811827562

1、建立 less 文件，并导出成 css 文件。

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

下图便是 /base.less 转的 /base.css 。

引入HTML 结构

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

头部布局

HTML 结构

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

less 样式

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

1、建立好框架。

<body><!-- 头部 --><header>1</header><script src="./js/flexible.js"></script>
</body>

/* 头部 */
header{height: (44 / 37.5rem);background-color: pink;
}

2、将头部的文字填充好，并设置好居中的位置。

<!-- 头部 --><header><a href="#" class="back">1</a><h3>极速问诊</h3><a href="#" class="note">问诊记录</a></header>

/* 头部 */
header{display: flex;justify-content: space-between;height: (44 / 37.5rem);background-color: pink;
}

3、设置好内边距。

padding: 0 (15 / 37.5rem);

4、设置行高。

line-height: (44 / 37.5rem);

5、再定义。

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

<a href="#" class="back"><span class="iconfont icon-left"></span></a>

6、将文字的大小尺寸修改好。

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

7、把背景颜色注销掉后，便是我们想要的背景。

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

1、插入图片。

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

// bannner区域
.banner{text-align: center;
}

2、使文字部分与图片之间有间隔。

margin-top: (30 / @rootSize);
margin-bottom: (34 / @rootSize);

3、设置宽高。

img{height: (206 / @rootSize);width: (240 / @rootSize);}

4、图片加上底部外边距。

margin-bottom: (18 / @rootSize);

5、修改好字体的大小。

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

1、添加两个li标签，用于装放问诊类型。

<!-- 问诊类型 --><div class="type"><ul><li>1</li><li>2</li></ul></div>

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

2、设置内边距，边框圆角，底部外边距。

// 问诊类型
.type{padding: 0 (15 / @rootSize);li{height: (78 / @rootSize);border: 1px solid #EDEDED;border-radius: (4 / @rootSize);margin-bottom: (15 / @rootSize);}
}

3、在li标签里再加上内边距的要求。

padding: 0 (15 / @rootSize);

4、使类型中的三块内容在flex布局中放在一起。

<li>    <a href=""><div class="pic">1</div><div class="txt">2</div><span class="iconfont icon-right"></span></a></li>

 a{display: flex;}

5、将名为"a"的元素设置为弹性布局容器，将子元素的垂直对齐方式设置为居中对齐。

a{display: flex;align-items: center;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);
}

1、插入小图片。

<div class="pic"><img src="./assets/type01.png" alt=""></div>

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

2、将其在其父容器中的弹性大小设置为1，即它们将平均分配父容器的空间。

.txt{flex: 1;}

3、将两段文字及字节图标放在一起。

h4{font-size: (16 / @rootSize);line-height: (24 / @rootSize);color: #3C3E42;margin-bottom: (4 / @rootSize);}p{font-size: (13 / @rootSize);line-height: (20 / @rootSize);color: #848484;}

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

4、补充好内容。

<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>

需要完整源码，可点击点我查看跳转，进行下载。

Web前端—移动Web第三天（移动Web基础、rem、less、综合案例—极速问诊）

版本说明当前版本号[20231120]。版本修改说明20231120初版本课程的笔记已经更新完毕，各位可以通过点击《黑马程序员2023新版前端Web开发HTML5CSS3移动web视频教程，前端web入门首选》学习笔记总目录查看所有知识点，同时也能免费下载学习…...

编程日记 2023/11/23 17:30:41

MySQL--慢查询（一）

1. 查看慢查询日志是否开启 show variables like slow_query%; show variables like slow_query_log; 参数说明： 1、slow_query_log：这个参数设置为ON，可以捕获执行时间超过一定数值的SQL语句。 2、long_query_time：当SQL语句执行…...

编程日记 2023/11/23 17:29:40

【大神支招】3步，打造一张BI报表

随着BI报表的高效直观、灵活分析的特点越来越被大家所熟知，很多BI零基础的用户可积极尝试制作BI报表，以达到灵活自助分析、高效智能分析的效果。那么BI报表零基础的小白们该怎么做BI报表，才能又快又好地做出来？ 大神支招&#xf…...

编程日记 2023/11/23 17:28:39

【Linux】文件操作

欢迎来到Cefler的博客😁 🕌博客主页：那个传说中的man的主页 🏠个人专栏：题目解析 🌎推荐文章：题目大解析（3） 目录 👉🏻文件是什么？&am…...

编程日记 2023/11/23 17:27:38

（动手学习深度学习）第13章实战kaggle竞赛：狗的品种识别

文章目录 1. 导入相关库2. 加载数据集3. 整理数据集4. 图像增广5. 读取数据6. 微调预训练模型7. 定义损失函数和评价损失函数9. 训练模型 1. 导入相关库 import os import torch import torchvision from torch import nn from d2l import torch as d2l2. 加载数据集 - 该数据…...

编程日记 2023/11/23 17:26:37

自定义注解+AOP

自定义注解与AOP（面向切面编程）的结合常常用于在应用程序中划定切面，以便在特定的方法或类上应用横切关注点。以下是一个简单的示例，演示了如何创建自定义注解，并使用Spring AOP来在被注解的方法上应用通知。如何创建…...

编程日记 2023/11/23 17:24:34

Ribbon

在Spring Cloud中，Ribbon是一个用于客户端负载均衡的组件，它可以与其他服务发现组件（例如Eureka）集成，以提供更强大的负载均衡功能。Ribbon使得微服务架构中的客户端能够更加智能地调用其他服务的实例，从而…...

编程日记 2023/11/23 17:23:34

1.创建第一个仓库并配置local用户信息 git config git config --global 对当前用户所有仓库有效 git config --system 对系统所有登录的用户有效 git config --local 只对某个仓库有效 git config --list 显示配置 git config --list --global 所有仓库 git config --list…...

编程日记 2023/11/23 17:22:33

基于SSM+Vue的鲜花销售系统/网上花店系统

基于SSM的鲜花销售系统/网上花店系统的设计与实现~ 开发语言：Java数据库：MySQL技术：SpringMyBatisSpringMVC工具：IDEA/Ecilpse、Navicat、Maven 系统展示主页管理员界面摘要鲜花销售系统是一个基于SSM（Spring …...

编程日记 2023/11/23 17:21:31

安卓：Android Studio4.0~2023中正确的打开Android Device Monitor

Android Studio4.0~2023 中如何正确的打开Android Device Monitor(亲测有效) 前些天买了新电脑，安装了新版本的Android Studio4.0想试一试，结果就出现了一些问题。问题引出： Android Device Monitor在工具栏中找不到，后来上网查…...

编程日记 2023/11/23 17:19:28

装备制造企业设备远程运维平台的建设-天拓四方分享

设备远程运维平台是一种基于互联网和物联网技术的设备管理平台，可以实现设备的远程监控、故障诊断、预警维护等功能。近年来，随着云计算、大数据、人工智能等技术的不断发展，设备远程运维平台的智能化程度越来越高，传统的设备运维…...

编程日记 2023/11/23 17:17:27

群晖NAS搭建WebDav服务做文件共享，可随时随地远程访问

文章目录 1. 在群晖套件中心安装WebDav Server套件1.1 安装完成后，启动webdav服务，并勾选HTTP复选框 2. 局域网测试WebDav服务2.1 下载RaiDrive客户端2.2 打开RaiDrive，设置界面语言可以选择中文2.3 点击添加按钮，新建虚拟驱动区2…...

编程日记 2023/11/23 17:16:26

c++调用Lua（table嵌套写法）

通过c调用lua接口将数据存储到虚拟栈中，就可以在lua脚本在虚拟栈中取得数据 c调用lua库，加载lua文件， lua_State* L;//定义一个全局变量***************************L luaL_newstate();luaL_openlibs(L);//打开Lua脚本文件std::string pat…...

编程日记 2023/11/23 17:14:24

算法复杂度分析

文章目录有数据范围反推算法复杂度以及算法内容一般方法递归有数据范围反推算法复杂度以及算法内容 c一秒可以算 1 0 7 10^7 107~ 1 0 8 10^8 108次一般方法看循环有几层循环就可以初步分析O( n i n^i ni) 双指针算法除外O(n) 递归公式法根据公式的形式&#xff0…...

编程日记 2023/11/23 17:13:24

几款Java源码扫描工具(FindBugs、PMD、SonarQube、Fortify、WebInspect)

说明有几个常用的Java源码扫描工具可以帮助您进行源代码分析和检查。以下是其中一些工具： FindBugs：FindBugs是一个静态分析工具，用于查找Java代码中的潜在缺陷和错误。它可以检测出空指针引用、资源未关闭、不良的代码实践等问题。FindBu…...

编程日记 2023/11/23 17:12:23

java springboot测试类鉴定虚拟MVC请求返回内容与预期值是否相同

上文 java springboot测试类鉴定虚拟MVC运行值与预期值是否相同中我们验证了它HTTP的返回状态简单说校验了他是否成功的状态这次我们来不对得到的内容我们直接改写测试类代码如下 package com.example.webdom;import org.junit.jupiter.api.Test; import org.springf…...

编程日记 2023/11/23 17:11:22

MongoDB随记

MongoDB 1、简单介绍2、基本术语3、shard分片概述背景架构路由功能chunk（数据分片）shard key（分片键值） 4、常用命令 1、简单介绍 MongoDB是一个分布式文件存储的数据库，介于关系数据库和非关系数据库之间&#xff0c…...

编程日记 2023/11/23 17:09:20

839 - Not so Mobile （UVA）

题目链接如下： Online Judge 这道题刘汝佳的解法极其简洁，用了20来行就解决了问题。膜拜…… 他的解法如下：天平（UVa839紫书p157）_天平 uva 839_falldeep的博客-CSDN博客我写了两个（都很冗长&#xff…...

编程日记 2023/11/23 17:08:18

php字符串处理函数的使用

php字符串处理函数的使用 trim() trim()函数的功能用于去除字符串首尾的空白字符(包括空格、制表符、换行符等）。它可以用于清理用户输入的数据或去除字符串中的多余空格。 <?php $char" holle world! ";echo trim($char) ?>str_repl…...

编程日记 2023/11/23 17:07:17

UEC++ day8

伤害系统给敌人创建血条首先添加一个UI界面用来显示敌人血条设置背景图像为黑色半透明填充颜色给敌人类添加两种状态表示血量与最大血量，添加一个UWidegtComponet组件与UProgressBar组件 UPROPERTY(EditAnywhere, BlueprintReadWrite, Category "Enemy …...

编程日记 2023/11/23 17:06:16