网站如何申请微信支付,想让一个网站上线需要怎么做,网站wap怎么做,用asp.net做的网站有哪些在前端开发里#xff0c;rem、em、vw都是用来设置元素大小的单位#xff0c;下面就用大白话讲讲它们的区别。
参考标准不一样
rem#xff1a;就像大家都用同一把“大尺子”来量东西#xff0c;这把“大尺子”就是网页里根元素#xff08;也就是 html 标签#…在前端开发里rem、em、vw都是用来设置元素大小的单位下面就用大白话讲讲它们的区别。
参考标准不一样
rem就像大家都用同一把“大尺子”来量东西这把“大尺子”就是网页里根元素也就是 html 标签的字体大小。不管元素在网页里的哪个位置只要用rem做单位它的大小就按照这把“大尺子”来算。比如根元素字体大小是16px那么1rem就是16px2rem就是32px。em每个元素自己有一把“小尺子”这把“小尺子”的长度取决于这个元素本身或者它爸爸元素父元素的字体大小。要是这个元素自己没设置字体大小就用它爸爸元素的字体大小当“尺子”要是自己设置了就用自己的字体大小当“尺子”。所以不同元素的“小尺子”可能不一样长。vw它的参考标准是浏览器窗口视口的宽度。把浏览器窗口的宽度平均分成100份1vw就相当于其中的1份。就好比把一块蛋糕切成100小块每一小块就是1vw。如果浏览器窗口宽度是1000px那1vw就是10px。
计算难度有差别
rem计算很简单只要知道根元素的字体大小用rem前面的数字乘以根元素字体大小就能算出元素实际大小。比如根元素字体大小是20px3rem就是60px20×3。em计算比较麻烦尤其是在网页里元素一层套一层的时候。因为每个元素的“小尺子”可能不同得先搞清楚当前元素或者它父元素的字体大小才能算出em对应的实际尺寸。比如父元素字体大小是18px子元素没设置字体大小子元素里2em就是36px18×2要是子元素自己设置了字体大小是22px那子元素里2em就是44px22×2。vw计算相对容易只要知道浏览器窗口的宽度用窗口宽度乘以vw前面的数字再除以100就能得到元素实际宽度。比如窗口宽度是800px5vw就是40px800×5÷100。
适用场景各不同
rem适合用来统一控制网页的整体布局和元素大小。要是想让网页里很多元素的大小跟着根元素字体大小一起变用rem就很方便。比如在做响应式网页时改变根元素字体大小整个网页的布局就能按比例缩放。em常用来设置元素内部的相对大小像元素的内边距、外边距、边框这些。这样能保证元素的这些部分和它自身的字体大小相匹配不管字体大小怎么变元素整体看起来都协调。比如按钮的内边距设成0.5em按钮字体大小改变时内边距也会跟着变按钮外观就不会失调。vw特别适合那些需要根据浏览器窗口宽度动态调整大小的元素。比如做一个全屏的轮播图用vw做单位不管用户用的是手机、平板还是电脑轮播图都能占满一定比例的窗口宽度自动适应不同设备。
代码示例感受一下
!DOCTYPE html
html langenheadmeta charsetUTF-8style/* 设置根元素字体大小 */html {font-size: 16px;}.parent {font-size: 20px;}.rem-box {width: 2rem;/* 宽度为 2 * 16px 32px */height: 2rem;background-color: lightblue;}.em-box {width: 2em;/* 宽度为 2 * 20px 40px因为继承了父元素 20px 的字体大小 */height: 2em;background-color: lightgreen;}.vw-box {width: 10vw;/* 宽度为视口宽度的 10% */height: 10vw;background-color: lightcoral;}/style
/headbodydiv classparentdiv classrem-box这是用rem单位的元素/divdiv classem-box这是用em单位的元素/divdiv classvw-box这是用vw单位的元素/div/div
/body/html在这个例子里三个盒子分别用了rem、em、vw做单位能很直观地看到它们在计算和显示上的不同。
