em 和 rem的区别?

2020-05-19 21:43发布

5条回答
爱前端
2楼 · 2020-05-20 09:47

em和rem都是可拓展的单位。都取决于所设置的字体的大小。

em:

如果给一个元素设置字体大小是16px,那么1em就是16px,2em就是32px。

如果给一个元素设置字体大小是20px,那么1em就是20px,2em就是40px。

也就是用em前面的数乘以元素本身的字体大小就可以了。

rem:

如果给HTML设置字体大小是50px,那么1rem就是50px,2em就是100px。

如果给HTML设置字体大小是100px,那么1rem就是100px,2em就是200px。

也就是用rem前面的数乘以html的字体大小就可以了。


所以区别就是:em是和元素本身字体大小有关的,rem是和HTML字体大小有关的。

DAYTOY
3楼 · 2020-05-22 10:02

两个都是写css样式的单位


区别:

 

em  是相对于当前标签所设字体大小的倍数 , 常用于首行缩进 text-indent:2em;


rem 是相对于html根标签字体大小的倍数,常用于移动端布局

一个it男士
4楼 · 2020-05-26 10:24

PX特点

1. IE无法调整那些使用px作为单位的字体大小;

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

 

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

 

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

 

 

       任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

 


EM特点 

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

 

所以我们在写CSS的时候,需要注意两点:

1. body选择器中声明Font-size=62.5%;

2. 将你的原来的px数值除以10,然后换上em作为单位;

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

 

 

 

       也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。


rem特点 

        rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

 

一个例子:

{font-size:14px; font-size:.875rem;}

注意: 

 

        选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。


lemon
5楼 · 2020-07-17 12:24

  px是固定的像素,一旦设置了就无法因为适应页面大小而改变。

  em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。

对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。


孙哈哈
6楼 · 2020-08-11 14:14

em和rem都是css的单位

em是相对长度单位,相对于应用在当前元素的字体尺寸及font-size(用于设置font-size属性本身,则是相对于父元素font-size计算)

rem相对字体长度单位,根元素(html)的font-size计算

相关问题推荐

  • 回答 90

    现在有很多女生学习编程哦,尤其是前端,越来越多的女生学习,所以是合适的

  • 回答 13

    html插入图片有两种方式:一种是通过标签插入的正常的图片,另一种是通过>< style>问题分析:1、首先你是通过第二种方式插入的是背景图片,直接用width和height只能控制div的宽度和高度。2、如果你插入的图片是通过标签的方式来插入的话,可以通过自身的属性...

  • 回答 17

    html添加图片的方法如下:1、打开html软件。2、导入项目。3、找到要添加图片的位置。4、写【imgsrc=图片路径】即可。

  • 回答 2

    1、默认状态下,背景会延伸到边框的区域下层2、可以通过 background-clip 属性来调整上述默认行为所带来的不便;这个属性的初始值是 border-box, 意味着背景会被元素的 border box(边框的外沿框) 裁切掉实现半透明边框代码如下:body {         ...

  • 回答 9

    html图片对齐主要用text-align属性来控制:text-align的值主要又分为:left左对齐,center居中对齐,right靠右对齐。

  • 回答 8

    你没有设置好,具体解决方法如下。输入如下代码:width表示宽度height表示高度下图所示,我将图片的宽和高通通缩小,可以看到,图片的尺寸果然按照我的意愿进行了改变。

  • 回答 6

    设置表格单元格的外边距为0        css中设置border-collapse: collapse;       或者在table标签中写cellspacing=0px

  • 回答 5
    已采纳

    br是强制换行的,一般用在段落文字里边的换行。

  • 回答 6

    1. 原生。直接告诉你,开发太慢,不能跨平台,先不要学。2. 使用WebView的hybrid app,Cordova/ionic 这些。就是用浏览器运行html,js,css仿app,我用了好几年,学习快,开发块,跨平台。问题是每个安卓版本/苹果版本/浏览器版本运行效果不一致,有些版本还运...

  • 回答 8

    常用的移动APP开发框架:1、框架:PhoneGapPhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。优点:可跨平台。phonegap框架帮我们解决了差异性,javascript与平台系统的连接由phonegap框架完成。    提供硬件访问控...

  • 回答 6

      1. LungoJS  这个是被认为开发移动网站最好的HTML5开发框架,使用 HTML5/CSS3 和 JavaScript 技术。可帮助创建基于 iOS、 Android、 Blackberry 和 WebOS 平台的应用程序。该框架可利用当前移动设备的高级特性,可捕捉事件包括滑动、触屏、长按等。无需...

  • 回答 11

    应该是样式不一样造成的

  • 回答 5

    1、使用meta标签:viewportH5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。viewport 是用户网页的可视区域。翻译为中文可以叫做视区。手机...

  • 回答 3

    就是标签上的一个属性,比如:js获取的时候是:obj.getAttribute(data-type);做一些逻辑操作或者唯一标示等,很方便的。

  • 回答 5

    src标签中放的是你的图片的路径,其中可以使用相对路径和绝对路径,相对路径就是你的图片在电脑中的存放位置,绝对路径就是指一些网站地址。alt标签中可以输入文本,当图片的路径错误时就会显示该文本内容。title标签中的值也是文本,当你鼠标悬停是所显示的...

没有解决我的问题,去提问