前端开发教程常用单元

前端开发通用单元

1.像素

功能：在前端开发中，视口的水平和垂直方向由许多小正方形组成，小正方形是一个像素

例如，如果div大小为100 x 100，则水平方向将占用100个小方块，垂直方向将占用200个小方块

它不会随视口的大小而改变，像素是固定单位（绝对单位）

2.百分比

功能：百分比是前端开发中的一个动态单位。始终以当前元素的父元素作为参考进行计算

例如，如果父元素的宽度和高度均为200px，而子元素的宽度与高度设置为50%，则子元素的高度和宽度均为100px

特征

2.1通过参考父元素的宽度来计算子元素的宽度

2.2通过参考父元素的高度来计算子元素的高度

2.3子元素填充是指父元素在水平和垂直方向上的宽度！计算

2.4子元素边距是指水平和垂直方向上的父元素宽度米！计算

2.5元素的边框不能用百分比设置

结论：百分比是一个动态单位，它会随着父元素（相对单位）的宽度和高度而变化

3.电磁阀

功能：em是前端开发中的动态单元，是与元素字体大小相关的单元

例如，字体大小：12px，因此1em等于12px

特征

2.1当前元素的字体大小已设置，与当前元素的字号相关

2.2如果未为当前元素设置字体大小，则设置字体大小相当于第一个祖先元素的字体大小

2.3如果没有为当前元素和所有祖先元素设置大小，则相当于浏览器的默认字体大小

结论：em是一个动态单位，它会随着参考元素（相对单位）的字体大小而改变

4.雷姆

功能：rem是根em，em是前端开发中的动态单元，

rem和em的区别在于，rem是相对于根元素字体大小的单位

例如，根元素（html）字体大小：12px，因此1em等于12px

特征

2.1除了根元素（html）之外，其他祖先元素的字体大小不会影响rem大小

2.2如果为根元素（html）设置了字体大小，则与根元素的字体大小相关

2.3如果没有为根元素设置字体大小，则与浏览器的默认字体大小相关

结论：Rem是一个动态单位，它会随着根元素（相对单位）的字体大小而改变

5.vw/wh

功能：vw和vh是前端开发中的动态单元，与web视口相关

特性：

1.1系统将视口的宽度和高度划分为100个部分。1vw占视口宽度的1%，1vh占视口高度的1%

1.2 vw和vh与百分比的区别在于，百分比总是指父元素

1.3 vw和vh总是指视口

2.什么是vmin和vmax？

Vmin：vw和vh中的较小值

Vmax：vw和vh中的较大值

使用场景：确保在移动开发中旋转后屏幕大小保持不变

统软云是一家专业和服务提供商，提供一站式移动应用解决方案，以满足您的各种需求。欢迎评估您的需求并免费获取报价。

，注册后为新手提供免费开发包