rem和em的区别

happyhuangjinjin 发布于2019-08-29 13:56 / 3453人阅读

摘要：关于和的区别表示根元素的字体大小通常为下面是一个动态设置字体大小的公式添加事件，当设备尺寸改变，就执行函数获取设备的宽度当前案例是以的设计稿为例，判断，若是设备尺寸超过，就不在执行这里的是在屏幕尺寸为的时候，字体大小为，之所以设置，是为了便

关于rem和em的区别 rem

rem:表示根元素的字体大小（通常为）

下面是一个动态设置html字体大小的公式

 ~function () {
            window.addEventListener("resize", computed); 
            // 添加事件，当设备尺寸改变，就执行computed函数
            computed();
            function computed() {
                var deviceW = document.documentElement.clientWidth || document.body.clientWidth;
                // 获取设备的宽度
                if (deviceW > 640) return;
                // 当前案例是以640的设计稿为例，判断，若是设备尺寸超过640，就不在执行computed
                document.documentElement.style.fontSize = deviceW / 640 * 100 + "px";
                // 100 这里的100是在屏幕尺寸为640的时候，html字体大小为100px，之所以设置100，是为了便于计算
                // 设置html的字体大小  这里是以640的设计稿为基准，当我们使用的设备宽度（deviceW）刚好为640的时候，html的  字体大小为100px; 当设备大小改变，小于640的时候， 就会触发resize函数，computed执行，动态的获取设备的宽度，然后除以640，就能计算出当前设备大小是原设计稿的百分之多少，然后乘以100，就能计算出当前屏幕宽度下html的字体大小为多少            }
        }();

document.documentElement.style.fontSize =xxxx 这里是设置html字体大小

以当前的计算公式，若是设备尺寸为640，计算后html的字体大小为100px; 1rem 就是100px; 若是屏幕尺寸缩小到320，computed函数会自动获取屏幕的宽度，重新计算html的字体大小，此时html字体大小应为50，所以1rem就等于50px，

而我们布局采用rem布局， width:.5rem, 意思就是某个物体的宽度值相对于html的字体大小的值的百分比，width:.5rem 就是width的值相对于html字体大小的百分比为50%。因为html随着屏幕的大小改变，会不停的变化，所以width的值也会跟着改变

em

em和rem一样都是相对单位，只不过em是以父级的font-size值决定的,当最近的父级没有设置font-size时，就会向上一层找，若是还没有就会一直向上找，直到找到html，若是还没有，就按浏览器默认字体大小，16px(在火狐和chrome);

px

PX实际上就是像素，用PX设置字体大小时，比较稳定和精确

一般浏览器支持的最小字体大小应该为12px;

GPU云服务器云服务器 html i和em 宽带和专线的区别专线和宽带的区别空间和域名的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112809.html

彻底弄懂css中单位px和em,remem>的区别

摘要：是相对长度单位。相对于当前对象内文本的字体尺寸。引自手册特点是新增的一个相对单位，根，这个单位引起了广泛关注。目前，除了及更早版本外，所有浏览器均已支持。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？ PX特点 IE无法调整那些使用px作为单位的字体大小； ...

saucxs 2019-08-29 12:25 评论0 收藏0
深入理解CSS中em, remem>, ex区别，及使用技巧

摘要：中常见尺寸单位描述百分比英寸厘米毫米一个是一个字体的。在中，是非常有用的单位，因为它可以自动适应用户所使用的字体。在中唯一例外的是属性，它的和值指的是相对父元素的字体大小。 CSS 中常见尺寸单位描述 % 百分比 in 英寸 cm 厘米 mm 毫米 ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。) pt ...

lbool 2019-08-29 16:44 评论0 收藏0
remem>与em的使用和区别详解

摘要：和，在自适应制作中最常用的单位。主要区别和单位之间的区别是浏览器根据谁来转化成值理解这种差异是决定何时使用哪个单元的关键。事实上，根据标准，它们是相对于使用单位的元素的字体大小。父元素的字体大小可以影响值，但这种情况的发生，纯粹是因为继承。 rem和em，在自适应制作中最常用的单位。rem是基于html元素的字体大小来决定，而em则根据使用它的元素的大小决定。二者都是灵活、可扩展的单位...

only_do 2019-08-23 13:53 评论0 收藏0
CSS：区别 px、em、remem>

摘要：的使用是相对于其父级的字体大小的，即倍数。浏览器的默认字体高都是，未经调整的浏览器显示。而且的关系不好转换，因此，常常人为地使。明显地，内部内的文字受到了父级的影响。有何区别 px 在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小； em 的值并不是固定的，会继承父级元素的字体大小，代表倍数； rem 的值并不是固定的，始终是基于根元素的，也代表倍数。 em em ...

shiweifu 2019-08-29 10:59 评论0 收藏0
px、em和remem>实战经验

摘要：前言在自适应布局或者移动端网页开发时，我们经常会用到和两个长度单位。，相对长度单位。相对于当前对象内文本的字体尺寸。所有未经调整的浏览器中都是。最大的优点是提供一致尺寸，便于计算。为了还原设计稿和实现合理的布局所以需要根元素重写。前言在自适应布局或者移动端网页开发时，我们经常会用到em和rem两个长度单位。接下来我们讨论一下这两个单位和px之间的区别，以及他们的使用场景等。区别 ...

xietao3 2019-08-30 15:54 评论0 收藏0