特效开发阶段：bootstrap+react小节

最新推荐文章于 2024-08-13 08:16:28 发布

芊芊儿591

最新推荐文章于 2024-08-13 08:16:28 发布

阅读量814

点赞数

文章标签： bootstrap react.js web

本文链接：https://blog.csdn.net/qq_65345949/article/details/127090703

版权

1.自适应屏幕分辨率

确立参考系，定义标准设备的屏幕宽度和字体大小

<html lang="en" style="font-size: 20px;">
比例公式（等式左右两边比例尺相同，从而达到等比例缩放的目的）：标准屏幕宽度 / 标准字体大小 = 新的屏幕宽度 / 新的屏幕字体大小

let newFontSize = window.innerWidth / (600 / 20)
将页面样式中的 px 单位换算并替换为 rem，方法是?rem = 元素的尺寸(设置需要自适应的尺寸，宽高都可以) / 标准字体大小

width: (300px/20px)=15rem;

绑定窗口的 resize 和 load 事件，触发事件时计算出新的屏幕宽度时的字体大小，设置 html 的字体大小

function resize() {

let newFontSize = window.innerWidth / (600 / 20)

// 设置html根节点的字体大小

html.style.fontSize = ${newFontSize}px;

}

window.addEventListener('resize', resize)

window.addEventListener('load', resize)

2.元素固定宽高比例缩放

html部分

</div>

CSS部分

.box {

width: 100%;

background-color: #f00;

position: relative;

}

.box>* {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.box_3x4::before {

content: '';

display: block;

padding-top: 75%;

}

.box_9x16::before {

content: '';

display: block;

padding-top: 56.25%;

}

.box-container {

/* width: 300px; */

300/标准字体大小16px=18.75rem

width: 18.75rem;

}

bootstrap框架

1.display显示

1.使用bootstrap的容器进行响应式布局的话，需要在head标签中加入此meta标签代码

2.屏幕大小参数

3.举例

d-block表示的是全部显示

d-sm-none表示的是大于sm全部隐藏

2.float position flex

先引用 <link rel="stylesheet" href="./css/bootstrap.min.css" />

bootstrap中

1.left用start表示

2.right用end表示

3.background用bg表示（颜色可以用以下单词表示）

4.position中方位词（top bottom left right）只能有0,50,100这三个参数之一表示，并且这三个参数代表是的是百分比

5.text-light表示字体颜色为白色

border-3表示边框宽度为3

3.text

1.文本对齐方式

text-end表示text-align：right或者text-align：end

2.换行与溢出

text-nowrap表示 white-space: nowarp;文本不换行，默认情况自动换行

overflow-scroll表示overflow: scroll;文本超出变成滑动块

3.字体大小

fs-1表示h1

jsx语法

8.若 react-dom 标签有多行，可以用圆括号包裹

9.react-dom 只能有一个根节点const element = ( <h1> Hello World </h1> // h1 和 h2 都是根节点这个写法是错误的 <h2> 222 </h2>)

10.将变量插入到元素中，使用大括号 {}

react

1.react特点

1.声明式

2.组件化

3.高效（diffing算法）

4.使用虚拟DOM

2.相关js库

react.js：React核心库。
react-dom.js：提供操作DOM的react扩展库
babel.min.js：解析JSX语法代码转为JS代码的库

3.注意事项

组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签
render有返回值return

4.组件三大属性

1.state

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件中render方法中的this为组件实例对象'
状态数据，不能直接修改或更新
组件自定义的方法中this为undefined，如何解决？

a) 强制绑定this: 通过函数对象的bind()

b) 箭头函数

2.props

每个组件对象都会有props(properties的简写)属性

组件标签的所有属性都保存在props中
内部读取某个属性值

this.props.name

4.对props中的属性值进行类型限制和必要性限制

Person.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number. }

5.扩展属性: 将对象的所有属性通过props传递:

<Person {...person}/>

6.默认属性值

Person.defaultProps = { age: 18, sex:‘男’}

7.组件类的构造函数

constructor(props){ super(props) console.log(props)//**打印所有属性}

3.refs

1.定义：组件内的标签可以定义ref属性来标识自己

2.createRef创建ref容器myRef = React.createRef() <input ref={this.myRef}/>

4.事件处理
1. 通过onXxx属性指定事件处理函数(注意大小写)
2. 通过event.target得到发生事件的DOM元素对象