文章目录
- 一、移动Web基础
- 谷歌模拟器
- 屏幕分辨率
- 视图
- 二倍图
- 适配方案
- 二、 rem简介
- 1.简介
- 2.媒体查询
- 3.flexible.js
- 4.rem 移动适配
- 三、less
- 1.变量
- 2.导入
- 3. 导出
- 4.禁止导出
- 四、响应式布局方案（媒体查询、Bootstrap框架）
- 1.媒体查询
- 2.Bootstrap
- 使用
提示：以下是本篇文章正文内容，下面案例可供参考
一、移动Web基础
谷歌模拟器
模拟移动设备，方便查看页面效果
屏幕分辨率
分类：
- 物理分辨率：硬件分辨率（出厂设置）
- 逻辑分辨率：软件 / 驱动设置
结论：制作网页参考 逻辑分辨率
视图
作用：显示 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
二、 rem简介
1.简介
- rem单位，是相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小
2.媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式
@media (width:320px) {html {background-color: green;}
}
3.flexible.js
flexible.js 是手淘开发出的一个用来适配移动端的 js 库。
核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。
<body>......<script src="./js/flexible.js"></script>
</body>
4.rem 移动适配
rem单位尺寸
- 确定基准根字号
- 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
- rem单位的尺寸
- rem单位的尺寸 = px单位数值 / 基准根字号
三、less
Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力
注意：浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件
VS Code 插件：Easy LESS，保存 less文件后自动生成对应的 CSS 文件
1.变量
概念：容器，存储数据
作用：存储数据，方便使用和修改
语法：
- 定义变量：@变量名: 数据;
- 使用变量：CSS属性：@变量名;
// 定义变量
@myColor: pink;
// 使用变量
.box {color: @myColor;
}
a {color: @myColor;
}
2.导入
作用：导入 less 公共样式文件
语法：导入: @import “文件路径”;
提示：如果是 less 文件可以省略后缀
@import './base.less';
@import './common';
3. 导出
写法：在 less 文件的第一行添加 // out: 存储URL
提示：文件夹名称后面添加 /
// out: ./index.css
// out: ./css/
4.禁止导出
写法：在 less 文件第一行添加: // out: false
四、响应式布局方案（媒体查询、Bootstrap框架）
1.媒体查询
基本写法
- max-width：最大宽度（小于等于）
- min-width：最小宽度（大于等于）
2.Bootstrap
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
中文官网: https://www.bootcss.com/
使用
1.引入 Bootstrap CSS 文件
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
2.调用类名： container 响应式布局版心类
<div class="container">测试</div>
