1. 开发环境 vue+vant
2. 电脑系统 windows10 专业版
3. 在开发的过程中, 咱们常常会应用到一些单位, 比方 px,em,rem,vw,vh 上面我来分享他们之间的区别, 心愿对你有所帮忙。
4. 相对单位 ——px
1. 什么是像素 (Pixel)?
在前端开发中视口的程度方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素。
例如 div 尺寸是 100 x 100, 那么程度方向就占用 100 个小方格, 垂直方向就占用 100 个小方格
2. 像素特点
不会随着视口大小的变动而变动, 像素是一个固定的单位 (相对单位)
5. 绝对单位 —— 百分比
1. 什么是百分比?
百分比是前端开发中的一个动静单位, 永远都是以以后元素的父元素作为参考进行计算
例如父元素宽高都是 200px, 设置子元素宽高是 50%, 那么子元素宽高就是 100px。
2. 百分比特点
2.1 子元素宽度是参考父元素宽度计算的
2.2 子元素高度是参考父元素高度计算的
2.3 子元素 padding 无论是程度还是垂直方向都是参考父元素宽度计算的
2.4 子元素 margin 无论是程度还是垂直方向都是参考父元素宽度计算的
2.5 不能用百分比设置元素的 border
论断: 百分比是一个动静的单位, 会随着父元素宽高的变动而变动 (绝对单位)
6. 绝对单位 ——–em
1. 什么是 em?
em 是前端开发中的一个动静单位, 是一个绝对于元素字体大小的单位
例如 font-size: 12px; , 那么 1em 就等于 12px
2.em 特点
2.1 以后元素设置了字体大小, 那么就绝对于以后元素的字体大小
2.2 以后元素没有设置字体大小, 那么就相当于第一个设置字体大小的先人元素的字体大小
2.3 如果以后元素和所有先人元素都没有设置大小, 那么就相当于浏览器默认的字体大小
论断: em 是一个动静的单位, 会随着参考元素字体大小的变动而变动 (绝对单位)
7. 绝对单位 ——–rem
1. 什么是 rem?
rem 就是 root em, 和 em 是前端开发中的一个动静单位,
rem 和 em 的区别在于, rem 是一个绝对于根元素字体大小的单位
例如 根元素 (html) font-size: 12px; , 那么 1em 就等于 12px
2.rem 特点:
2.1 除了根元素以外, 其它先人元素的字体大小不会影响 rem 尺寸
2.2 如果根元素设置了字体大小, 那么就绝对于根元素的字体大小
2.3 如果根元素没有设置字体大小, 那么就绝对于浏览器默认的字体大小
论断: rem 是一个动静的单位, 会随着根元素字体大小的变动而变动 (绝对单位)
8. 绝对单位 ——–vw/vh
1. 什么是 vw(Viewport Width) 和 vh(Viewport Height)?
1.1vw 和 vh 是前端开发中的一个动静单位, 是一个绝对于网页视口的单位
1.2 零碎会将视口的宽度和高度分为 100 份,1vw 就占用视口宽度的百分之一, 1vh 就占用视口高度的百分之一
1.3vw 和 vh 和百分比不同的是, 百分比永远都是以父元素作为参考
而 vw 和 vh 永远都是以视口作为参考
论断: vw/vh 是一个动静的单位, 会随着视口大小的变动而变动 (绝对单位)
2. 什么是 vmin 和 vmax?
vmin: vw 和 vh 中较小的那个
vmax: vw 和 vh 中较大的那个
应用场景: 保障挪动开发中屏幕旋转之后尺寸不变
留神: 如果是做挪动端开发, 须要应用百分比, 倡议应用 vh。9. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。