CSS - 移动Web网页开发（2）- 必掌握知识点 - #博学谷IT学习技术支持#_博学谷第二阶段移动web网页开发阶段作业分析代码-CSDN博客

本文链接：https://blog.csdn.net/weixin_44946585/article/details/125215826

文章目录

移动端布局（续）
响应式布局【一般用响应式 UI 框架和媒体查询结合使用】
学习心得

移动端布局（续）

四、rem 移动端适配

1. 移动适配

rem：目前多数企业在用的解决方案
vw / vh：未来的解决方案

2. rem

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

1 rem = 1 HTML字号大小

3. rem-移动适配-媒体查询（设置差异化的CSS样式）【基本原理】

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

@media (媒体特性) {
    选择器 {
        css属性
    }
}

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

4. flexible

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

五、Less

1. Less

less 是一个 css 预处理器，Less 文件后缀是 .less
优点：扩充了 css，使 css 具备了一定的逻辑性、计算能力
注意：浏览器不识别 Less 代码，目前阶段，需要引 css

2. 注释

单行注释 //
多行注释 /* */

3. 运算

加、减、乘直接写
除需要加括号

4. 后代选择器

嵌套能快速生成后代选择器
注意：& 不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用。

5. 变量

定义变量： @变量名: 值;
使用变量： css 属性: @变量名;

6. Less 导入其他 Less 文件

导入： @import ‘文件路径’;

7. Less 导出

用 easyless插件导出步骤

在 VSCode 设置中搜索 easyless 点击 ’在 setting.json 中编辑‘ ——> 在 "Less.compile": {"out": "导出路径/"}
导出到单独路径中，在 less 文件开头编写// out: 路径/

8. 禁止 Less 导出

在 Less 文件第一行添加： // out: false

响应式布局【一般用响应式 UI 框架和媒体查询结合使用】

一、媒体查询（目标：能够根据设备宽度的变化，设置差异化样式）

1. 媒体特性常用写法

max-width 从大到小的顺序写
min-width 从小到大的顺序写

2. 完整写法（了解）

@media 关键词媒体类型 and （媒体特性） {css 代码}
关键词： and only not

3. 外联式 css 引入

<link rel="stylesheet" media="(媒体特性)" href="xx.css"> 注意媒体特性需要加括号

二、Bootstrap（布局响应式框架）

1. Bootstrap 是前端 UI 框架，它提供了大量编写好的 css 样式，语序开发者结合一定的 HTML 结构和 JS 快速实现效果

2. 中文官网： https://www.bootcss.com/

3. Bootstrap 的使用

Bootstrap 下载
引入 <link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.min.css">
调用类：使用 Bootstrap 提供的样式

❗❗ 4. Bootstrap 栅格系统

栅格化是指将整个页面宽度分成若干等份
Bootstrap3 默认将网页分为 12 等份

	超小屏幕	小屏幕	中等屏幕	大屏幕
响应断点	<768px	>=768px	>=992px	>=1200px
别名	xs	sm	md	lg
容器宽度	100%	750px	970px	1170px
类前缀	col-xs-*	col-sm-*	col-md-*	col-lg-*
列数	12	12	12	12
列间隙	30px	30px	30px	30px

5. 一些经常使用的类

.container 指定宽度且居中，类自带间距 15px
.row 类自带间距 -15px
.container-fluid 所有应用该类名的盒子，宽度均为100%、

学习心得

rem、vw和vh只用于移动端，并不是属于响应式布局的，刚开始错误的把他们归类为响应式，其实不然。响应式布局一般使用响应式UI框架和媒体查询相结合使用的。
注意Bootstrap的栅格系统，每个盒子左右内边距都有15px。