2024-08-06发表2025-03-15更新HTML

8 HTML-移动Web

移动 Web 基础

谷歌模拟器

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

屏幕分辨率

分类：

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

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

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倍（不缩放）

二倍图

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

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

使用方法：

1681811271300

适配方案

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

rem

简介

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

媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的 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视口宽度）

rem单位的尺寸

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

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 文件可以省略后缀

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

导出CSS

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

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

1 2	// out: ./index.css // out: ./css/

禁止导出

也就是该文件不导出css文件，纯当less来用

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

1681811772496

vw适配方案

vw和vh基本使用

vw和vh是相对单位，相对视口尺寸计算结果

vw：viewport width（1vw = 1/100视口宽度）
vh：lviewport height ( 1vh = 1/100视口高度 )
vw和vh仅仅是单位，项目中用vw则都是用vm，项目中用vh则都要用vh，不要混用

vw布局

vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )

vh问题

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

媒体查询

基本写法

1682667975274

max-width：最大宽度（小于等于）
min-width：最小宽度（大于等于）

书写顺序

min-width（从小到大）
max-width（从大到小）

案例-左侧隐藏

需求：网页宽度小于等于768px则隐藏左侧区域

1682668088236

HTML 结构

<div class="box">
  <div class="left">left</div>
  <div class="main">
    响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果
  </div>
</div>

CSS 样式

.box {
  display: flex;
}

.left {
  width: 300px;
  height: 500px;
  background-color: pink;
}

.main {
  flex: 1;
  height: 500px;
  background-color: skyblue;
}

@media (max-width: 768px) {
  .left {
    display: none;
  }
}

媒体查询-完整写法

1682668186585

关键词 / 逻辑操作符

and
only
not

媒体类型

媒体类型用来区分设备类型

screen：屏幕设备
打印预览：print
阅读器：speech
不区分类型：all

媒体特性

视口宽高：width / height
视口最大宽高：max-width ；max-height
视口最小宽高：min-width；min-height
屏幕方向：orientation
- protrait：竖屏
- landscape：横屏

媒体查询-外部CSS

1682668446411

<link rel="stylesheet" media="(max-width:768px)" href="./green.css">

8 HTML-移动Web

https://bubuweiying.site/8HTML移动Web/

作者

步步为营

发布于

2024-08-06

更新于

2025-03-15

许可协议

#HTML

8 HTML-移动Web

移动 Web 基础

谷歌模拟器

屏幕分辨率

视口

二倍图

适配方案

rem

简介

媒体查询

rem 布局

flexible.js

rem 移动适配

less

注释

运算

嵌套

变量

导入

导出CSS

禁止导出

vw适配方案

vw和vh基本使用

vw布局

vh问题

媒体查询

基本写法

书写顺序

案例-左侧隐藏

媒体查询-完整写法

关键词 / 逻辑操作符

媒体类型

媒体特性

媒体查询-外部CSS

作者

发布于

更新于

许可协议

喜欢这篇文章？打赏一下作者吧

分类

链接

标签

目录

最新文章