特效开发阶段:bootstrap+react小节
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 class="box-container">
<div class="box box_9x16">
</div>
</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标签代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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这三个参数之一表示,并且这三个参数代表是的是百分比
<div class="box bg-danger position-absolute start-50 top-50 translate-middle"></div>
<div class="box bg-danger float-end"></div>
5.text-light表示字体颜色为白色
border-3表示边框宽度为3
<div class="row text-light g-5 border border-3">
3.text
1.文本对齐方式
text-end表示text-align:right或者text-align:end
<div class=" text-end">你好世界</div>
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.事件处理
通过onXxx属性指定事件处理函数(注意大小写)
通过event.target得到发生事件的DOM元素对象
特效开发阶段:bootstrap+react小节相关推荐
- 高级特效开发阶段学习总结
目录 一.css预编译工具 一.npm方式下载 二. 基本语法 三.编译生成css文件 四.监视文件变化(自动编译生成css文件) 五.监视目录变化 六.进阶语法 二.元素的固定宽高比等比例缩放 一. ...
- 视频教程-python项目之学员CRM管理系统开发阶段一-Python
python项目之学员CRM管理系统开发阶段一 TriAquae开源运维软件创始人,混迹IT运维领域多年,曾就职于松下.国政通.飞信.中金.NOKIA等公司,维护过少至几十台,多至数万台设备的IT系统 ...
- python项目之学员CRM管理系统开发阶段一-李杰-专题视频课程
python项目之学员CRM管理系统开发阶段一-4225人已学习 课程介绍 面向初级开发一套含有角色,权限,内容为一体的学员管理,抛弃传统的每个页面繁琐的增删改查,开发公共组件,使得开 ...
- 软件开发环境-按开发阶段分类
按开发阶段分类,有前端开发环境(支持系统规划.分析.设计等阶段的活动).后端开发环境(支持编程.测试等阶段的活动).软件维护环境和逆向工程环境等.此类环境往往可通过对功能较全的环境进行剪裁而得到.软件 ...
- 《Unity着色器和屏幕特效开发秘笈》—— 3.4 创建BlinnPhong高光类型
本节书摘来自华章出版社<Unity着色器和屏幕特效开发秘笈>一 书中的第3章,第3.4节,作者:(美)Kenny Lammers,更多章节内容可以访问云栖社区"华章计算机&quo ...
- 《Unity着色器和屏幕特效开发秘笈》—— 2.1 引言
本节书摘来自华章出版社<Unity着色器和屏幕特效开发秘笈>一 书中的第2章,第2.1节,作者:(美)Kenny Lammers,更多章节内容可以访问云栖社区"华章计算机&quo ...
- 《Unity着色器和屏幕特效开发秘笈(原书第2版)》一2.9 打包和混合纹理
本节书摘来自华章出版社<Unity着色器和屏幕特效开发秘笈(原书第2版)>一书中的第2章,第2.9节,作者 [英]艾伦朱科尼(Alan Zucconi) [美]肯尼斯拉默斯(Kenneth ...
- android os自动安裝软件,[图]Bliss OS 12进入开发阶段:可在桌面设备上安装Android 10系统...
此外还对电池进行了优化,添加了额外的安全性选项和相关功能,支持大部分主流游戏手柄,兼容ARM / ARM64应用程序. 目前Bliss OS 12已经进入早期开发阶段,有望让您在PC上运行最新的And ...
- 吃货开发 阶段01 类的定义 方法的布局 0925
吃货开发 阶段01 类的定义 方法的布局 0925 视频 吃货联盟0925-01 定义订单类Order - 西瓜视频 https://www.ixigua.com/687631188571367067 ...
- 《Unity着色器和屏幕特效开发秘笈》—— 1.7 创建渐变纹理来控制漫反射着色...
本节书摘来自华章出版社<Unity着色器和屏幕特效开发秘笈>一 书中的第1章,第1.7节,作者:(美)Kenny Lammers,更多章节内容可以访问云栖社区"华章计算机&quo ...
最新文章
- c++ stdlib中rand()函数的值范围
- 推荐VSCode多语言开发,支持一键JAVA
- java web转码_javaweb后台转码
- 在python中函数和类都属于可调用对象_在Python中函数和类都属于可调用对象
- 使用Python判断文件是否为PE文件
- 信贷系统学习总结(3)——现金贷之产品架构和信审系统
- qt5 下载 及 qtcreator集成msvc2017 x64
- 一、Maven-单一架构案例(创建工程,引入依赖,搭建环境:持久化层,)
- C++ 编写一个解释器
- 关于MYM码支付系统
- 机器学习:最大熵模型
- 驰骋BPM系统-表单引擎-流程引擎2020年大换装
- 如何写一手好文章:练习、技巧,以及艺术
- 华清远见上海中心培训感言
- 海绵城市 水利遥测终端机TY511
- cmd命令行下常见的注册表操作
- OpenGL之路(一)OpenGL、gl、glu、glut的区别 + glut环境的搭建
- openwrt修改生成BIN文件大小以用于8M FLASH(WR703N)
- 如何将SketchUp的模型导入PPT?
- c语言学习打卡日记 3、有关assis码的字符转换