本文总结了前端特效开发中的屏幕自适应布局、SASS预编译、Bootstrap使用及React基础。介绍了rem布局的实现步骤，SASS的安装与使用，Bootstrap的自定义主题、布局和样式组件，以及React的jsx语法、组件创建、状态管理和事件处理等关键概念。
一、使用rem的屏幕自适应布局
rem是浏览器描述长度的单位，是相对于‘html’的字体大小的单位。当页面元素需要在不同屏幕宽度下保证元素的比例大小不变时，可以使用。
使用步骤：
1.确定参考系，定义标准设置的屏幕宽度和字体大小
此时我们定义标准设备宽为600px,标准字体大小为20px
2.计算新的屏幕尺寸下的新的字体大小
let newFontSize = window.innerWidth / (600 / 20)
function resize() {
let newFontSize = window.innerWidth / (600 / 20)
console.log(newFontSize);
html.style.fontSize = `${newFontSize}px`;
}
3.将页面样式中的‘px’单位替换为‘rem’,rem=元素的尺寸/标准字体的大小
width: 15rem;
height: 15rem;
4.绑定窗口尺寸变化事件和页面加载事件
window.addEventListener('resize', resize)
window.addEventListener('load', resize)
二、css预编译工具sass
1.安装命令
npm install -g sass
2.命令行使用方法
（1）sass <inputPath> <outputPath>
<inputPath>要编译的scss或sass
<outputPath>编译万的css文件的输出路径
（2）sass --watch <inputPath> .<outputPath>
添加--watch标识，可以让sass自动监视文件变化，然后自动输出到指定文件
（3）sass --watch <inputPath>:<outputPath>
监视文件夹中任一文件的变化并输出到对应文件夹
三、bootstrap
1.npm安装
npm i bootstrap
2.自定义主题
步骤如下：
（1）下载 `bootstrap` 源代码
- 创建一个文件夹用于存放 `bootstrap` 源代码（建议使用英文文件夹）
- 在文件夹中打开 `cmd`
- 运行 `npm init -y`
- 运行 `npm install bootstrap`
（2）根据需要修改 `node_modules/bootstrap/scss` 目录下的代码
（3）运行 `sass` 进行编译，重新编译 `bootstrap.scss` 文件
（4） 输出 `bootstrap.css` 文件
3.container布局
在页面的根节点，使用class="container"等设置布局容器，布局容器受断点影响，可以设置不同断点上的容器。
4.display显示方式
语法：
在xs断点下：d-{value}
在xs以上：d-{breakpoints}-{value}
5.float
float-start：左浮动
float-end：右浮动
clearfix：清除浮动
6.position
position-{value}
value: absolute（绝对定位） relative（相对定位）fixed（固定定位）sticky（粘滞定位）
7.d-flex开启弹性盒
8.gird网格
基础用法
纵向排列
横向排列
offset-{value}: 用于设置单元格左侧的偏移量，value取值为1~12，含义和col相同
g-{value}: 设置单元格水平和竖直间距
gx-{value}: 设置单元格水平间距
gy-{value}：设置单元格垂直间距
row-cols-{breakpoints}-{value}: 设置让一行显示多少列
9.color
bg-{value}:设置背景色
text-{value}：设置文本色
text-bg-{value}：设置文本+背景色
10.size
设置元素大小
w-{value} 设置宽度，value取值为：25 50 75 100 auto
h-{value} 设置高度，value取值为：25 50 75 100 auto
11.内外边距
p-{value}: 设置四周的内边距
p{dir}-{value}：设置指定的一边的内边距，dir取值为t b s e代表上 下 左 右
p{axis}-{value}：设置水平或者竖直轴上的内边距，axis取值为x y,代表水平和竖直
m-{value}: 设置四周的外边距
m{dir}-{value}：设置指定的一边的外边距，dir取值为t b s e代表上 下 左 右
m{axis}-{value}：设置水平或者竖直轴上的外边距，axis取值为x y,代表水平和竖直
12.元素间的间距
13.text文本
fs-{value}:设置字体大小，value取值为1~6
fw-bolder:加粗
fst-italic：斜体
lh-{value}：行高，value取值为 1 sm base lg
14.form-control
<body class="d-flex flex-column align-items-center">
<div class="card p-3" style="width: 300px;">
<div class="
最低0.47元/天 解锁文章
扫一扫
211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
