rem和em的用法
程序员文章站
2023-11-19 16:22:28
1、rem转化为向素值的方法 rem单位转化为像素大小取决于根元素的字体大小,即HTML元素的字体大小,根元素字体大小乘以rem。 例:根元素的字体大小 16px,10rem 将等同于 160px,即 10rem x 16px = 160px 2、em单位如何转化为像素值 当使用em单位时,像素的单 ......
1、rem转化为向素值的方法
rem单位转化为像素大小取决于根元素的字体大小,即HTML元素的字体大小,根元素字体大小乘以rem。
例:根元素的字体大小 16px,10rem 将等同于 160px,即 10rem x 16px = 160px
2、em单位如何转化为像素值
当使用em单位时,像素的单位是em值乘以使用em单位的元素的字体的大小
例:如果一个 div 有 18px 字体大小,10em 将等同于 180px,即 10 × 18 = 180
总结:
- rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
- em 单位基于使用他们的元素的字体大小。
- rem 单位基于 html 元素的字体大小。
- em 单位可能受任何继承的父元素字体大小影响
- rem 单位可以从浏览器字体设置中继承字体大小。
- 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
- 在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
- 使用rem单位,除非你确定你需要 em 单位,包括对字体大小。
- 媒体查询中使用 rem 单位
- 不要在多列布局中使用 em 或 rem -改用 %。
- 不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素。
需要注意的是:
样式的reset中需先设置html字体的初始化大小为50px,这是为了防止js被禁用或者加载不到或者执行错误。
而做的兼容样式的reset中需先设置body字体的初始化大小为16px,这是为了让body内的字体大小不继承父级html元素的50px,而用系统默认的16px
来源:
上一篇: PHP原生写的生成图片缩略图类
下一篇: Python 迭代器
推荐阅读
-
闭包在python中的应用之translate和maketrans用法详解
-
git用法教程图文详解(git fetch和git pull的区别)
-
Mybatis的mapper文件中$和#的用法及区别详解
-
继承和接口的区别在哪里(2者区别和用法分析)
-
Python中内置数据类型list,tuple,dict,set的区别和用法
-
JavaScript 数组some()和filter()的用法及区别
-
append和appendTo的区别以及appendChild用法
-
python的类变量和成员变量用法实例教程
-
Oracle回滚段的概念,用法和规划及问题的解决
-
call和apply的区别是什么(apply的用法和搭配)