px-rem

px rem em vh vw之间的区别到底是啥?

落爺英雄遲暮 提交于 2020-08-06 21:22:35
绝对长度 px px是像素值,是一个固定的长度,比如我们的米,厘米一样。 相对长度 为什么我们需要相对长度rem em等?🤔 固定长度已经不能满足我们现在的需求了。 🌰举例:比如我们在缩小我们屏幕的时候,我们不仅仅是需要缩小我们的盒子的宽高,我们还想要让我们字体大小也随之缩小,这样用户体验会更好一点。 rem rem 与 px 的计算关系 rem的值是px的倍数 默认情况下 font-size = 16px ,那么 1rem = 16px rem 如何修改与px的相对计算关系 我们可以在并且只能在 html标签 (因为html节点是根节点,就是rem里面的r:root)里面修改 font-size : 32px , 从而 1rem = 32px 代码 <div class= "div-rem" >rem</div> 复制代码 /* rem的用法 */ html{ font-size:16px; } .div-rem{ width: 10rem; height: 10rem; font-size: 1rem; background-color: #a58778; } 复制代码 em em 与 px 的计算关系 em的值是px的倍数 默认情况下 font-size = 16px ,那么 1em = 16px em 如何修改与px的相对计算关系 我们可以在自己元素上面修改 font

rem与px的转换

℡╲_俬逩灬. 提交于 2020-04-12 12:21:01
rem 是相对于根元素 <html> ,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定。 我们知道,浏览器默认的字号 16px ,来看一些 px 单位与 rem 之间的转换关系: | px | rem | ------------------------ | 12 | 12/16 = .75 | | 14 | 14/16 = .875 | | 16 | 16/16 = 1 | | 18 | 18/16 = 1.125 | | 20 | 20/16 = 1.25 | | 24 | 24/16 = 1.5 | | 30 | 30/16 = 1.875 | | 36 | 36/16 = 2.25 | | 42 | 42/16 = 2.625 | | 48 | 48/16 = 3 | ------------------------- 为了方便计算,时常将在 <html> 元素中设置 font-size 值为 62.5% : 相当于在 <html> 中设置 font-size 为 10px ,此时,上面示例中所示的值将会改变: | px | rem | ------------------------- | 12 | 12/10 = 1.2 | | 14 | 14/10 = 1.4 | | 16 | 16/10 = 1.6 | | 18