精华内容
下载资源
问答
  • em rem 都是灵活可扩展的单位,由浏览器转换为像素值,取决于设计中的字体大小,如果使用值 1em 或 1rem ,它可以被浏览器转换为从 16px 到 160px 或其他任意值。浏览器使用 1px ,那么 1px 始终显示为完全 1px。...
  • pxem rem 三者区别

    千次阅读 2019-02-18 03:16:11
    pxem rem 三者有什么区别? PX px 实际上就是像素,用PX设置字体大小时,比较稳定精确。 px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) px特点 IE无法调整那些...

    px、em 和 rem 三者有什么区别?

    PX

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

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

    px特点

    • IE无法调整那些使用px作为单位的字体大小;
    • 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
    • Firefox能够调整px和em,rem,但是有大部分的国产浏览器使用IE内核。

    EM

    em 就是根据基准来缩放字体的大小。

    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特点

    • em的值并不是固定的;
    • 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 相对于根元素 <html> ,这样就意味着,我们只需要在根元素确定一个参考值。

    rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。

    rem特点

    • rem 相对单位,相对于根元素 <html> ;
    • 相对大小和绝对大小的优点于一身;
    • 修改根元素就成比例地调整所有字体大小;
    • 避免字体大小逐层复合的连锁反应.

    对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。示例:

    p {font-size:14px; font-size:.5rem;}
    

    注意:
    选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。
    在这里为大家提供一个px,em,rem单位转换工具,地址:http://pxtoem.com/

    px、em和rem 的问题:

    使用 px 设置字体大小时,存在一个问题:

    当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体。

    rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。

    二者比较emrem
    单位基于基于使用他们的元素的字体大小基于 html 元素的字体大小。
    继承可能受任何继承的父元素字体大小影响可以从浏览器字体设置中继承字体大小。
    使用情况使用em单位应根据组件的字体大小而不是根元素的字体大小。
    不使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
    使用rem单位,除非你确定你需要 em 单位,包括对字体大小。

    注意:

    • 媒体查询中使用 rem 单位。
    • 不要在多列布局中使用 em 或 rem ,改用%。
    • 不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素。

    原文: http://www.w3cplus.com/css/when-to-use-em-vs-rem.html © w3cplus.com

    浏览器的兼容性

    除了IE6-IE8,其它的浏览器都支持em和rem属性,px是所有浏览器都支持。
    因此为了浏览器的兼容性,可“px”和“rem”一起使用,用"px"来实现IE6-8下的效果,然后使用“Rem”来实现代浏览器的效果。

    原文:http://blog.csdn.net/woaiwojiaweihao150/article/details/49933653

    其他知识点

    • CSS 创建圆角的属性:border-radius 中值的单位(px,%)区别?
      参考链接:http://www.w3school.com.cn/tiy/c.asp?f=css_border-radius

    • min-width由于该属性不能从其他父元素继承,所以在继承假设时请注意。
      如果作者使用绝对值(px,pt,in,cm,mm)定义宽度,则宽度将无限制地定义,因此最小宽度将不起作用。
      例如,如果200px的值被用作width长度,那么min-width:100px 的值将不必要,因为您已经为width(即200px)指定了绝对值。
      最好的使用方法min-width是定义一个width百分比的值,并使用绝对值的min-width财产,否则使用百分比值为两者min-width,width不会产生预期的结果。

    如有侵权,联系删除。

    展开全文
  • px和em和rem区别

    千次阅读 2019-12-07 14:23:41
    1、px实际上就是像素,与物理像素有一定的区别,用px设置字体大小,比较精确,但是有缺点,当浏览器页面缩放时,px并不能跟随变大。当前网页的布局就会被打破。 2、em是根据基准来缩放字体的大小。em是相对单位,...

    1、px实际上就是像素,与物理像素有一定的区别,用px设置字体大小,比较精确,但是有缺点,当浏览器页面缩放时,px并不能跟随变大。当前网页的布局就会被打破。
    2、em是根据基准来缩放字体的大小。em是相对单位,一般都是以<body>的字体大小作基准的。em是相对于父元素的属性来计算的,这样就会存在一个问题,就是每一层父元素都必须有它的数值。
    3、而rem不同,rem是相对于根元素html,而此时我们只需要以rem为基准就可以了

    展开全文
  • 字体大小同样都是1.5em,但是效果却截然不同,按照W3C提供的公式,我们可以计算下: class为id1的div字体大小继承自父元素body:16px*1.5em = 24px class为id2的div字体大小继承自父元素id1:24px*1.5em = 36px ...
  • 主要介绍了css中的pxemrem、pt 之间的特点和区别及换算,各大小单位是否继承父元素大小及浏览器兼容与否等方面也做了详细解释,需要的朋友可以参考下
  • 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?下面给大家详细介绍下。 PX特点 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的...
  • 今天我们主要讲解remempx这些常用单位的区别和用法。 px(绝对长度单位) px特点 IE无法调整那些使用px作为单位的字体大小; 国外的大部分网站能够调整的原因在于其使用了emrem作为字体单位; Firefox能够...

    css单位中分为相对长度单位、绝对长度单位。
    在这里插入图片描述
    今天我们主要讲解rem、em、px这些常用单位的区别和用法。

    px(绝对长度单位)

    px特点

    1. IE无法调整那些使用px作为单位的字体大小;
    2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
    3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

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

    em(相对长度单位)

    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特点

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

    一个例子:

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

    注意:

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

    接下来我将奉献移动端字体适应所有设备的一个插件的源代码

    (function (doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
        //苹果4:320;苹果5、6、7:640;p系列都是720设计图的宽度,50是一个基准宽度(html的font-size值)
      };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    
    展开全文
  • 区别css单位pxemrem

    千次阅读 多人点赞 2019-06-12 20:05:45
    在对页面进行自适应时,查阅相关资料了解到,通常有两种方式将px转换为em或者rem,下面就上述三者之间的联系进行讲解: empx转换 一般浏览器默认1em=16px,通过设置font-size大小来代表如:16px*0.625=10px,其则...

    在对页面进行自适应时,查阅相关资料了解到,通常有两种方式将px转换为em或者rem,下面就上述三者之间的联系进行讲解:

    em与px转换

    一般浏览器默认1em=16px,通过设置font-size大小来代表如:16px*0.625=10px,其则代表1em=10px,直接上代码(注释的样式为浏览器默认 (1em=16px)的长宽):

    <!DOCTYPE html>
    <html lang="en" >
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
             body{font-size: 16px;}
            /*1em=10px*/
            /*#div1{width:640px;height:320px;margin:160px auto;padding-top:160px;}*/
            #div1{width:40em;height:20em;margin:10em auto;padding-top:10em;}
            /*#div2{width:200px;height:200px;margin:0 auto;}*/
            #div2{width:12.5em;height:12.5em;margin:0 auto;}
            /*#div3{width:480px;height:320px;margin:80px auto;}*/
            #div3{width:30em;height:20em;margin:5em auto;}
        </style>
    </head>
    <body>
    <div id="div1" style="background:lightslategray;">
        <div id="div2" style="background: darkseagreen;"></div>
    </div>
    <div id="div3" style="background: deepskyblue;"></div>
    </body>
    </html>
    

    结果如图所示:
    在这里插入图片描述
    在进行转换之前,我们一定要查看浏览器默认字体(最小)大小,如chrome浏览器,默认字体最小为12px,所以即使我们为了方便设置1em=10px,其浏览器仍旧以1em=12px计算
    16px*0.75=12px=1em

     body{font-size: 12px;}
     或者{font-size: 75%;}
    

    结果如图所示:
    在这里插入图片描述

    em与rem区别

    rem与px,和em与px转换是一样的,二者区别在于前者默认从根元素继承,后者从父级元素继承,还是上述代码,html我们不设置font-size,其默认为16px,上代码展示(div3单位我们修改为rem):

    <!DOCTYPE html>
    <html lang="en" >
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{font-size: 12px;}
            /*1em=10px*/
            /*#div1{width:640px;height:320px;margin:160px auto;padding-top:160px;}*/
            #div1{width:40em;height:20em;margin:10em auto;padding-top:10em;}
            /*#div2{width:200px;height:200px;margin:0 auto;}*/
            #div2{width:12.5em;height:12.5em;margin:0 auto;}
            /*#div3{width:480px;height:320px;margin:80px auto;}*/
            #div3{width:30rem;height:20rem;margin:5rem auto;}
        </style>
    </head>
    <body>
    <div id="div1" style="background:lightslategray;">
        <div id="div2" style="background: darkseagreen;"></div>
    </div>
    <div id="div3" style="background: deepskyblue;"></div>
    </body>
    </html>
    

    结果如图所示:
    在这里插入图片描述
    从上述我们可以看到,div3单位设置rem后,其并没有根据body设置而变化,仍旧默认font-size:16px。所以为了方便,我们可以设置16px*1.25=20px,其代表1em为20px,同样有利于我们计算。

    展开全文
  • 1.rem和empx 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px; 这样12...
  • px,em,rem区别

    千次阅读 2019-01-18 14:04:18
    它们都是用于设置字体的大小以及盒子的宽高,但是px不会因为浏览器尺寸的改变而改变,而em和rem会因为浏览器尺寸的变化而变化   在我们写代码的过程中,经常在CSS中定义字体的大小或者元素的宽高值时会使用到尺寸...
  • 因为自己也经常做移动端的开发工作,现总结一份页面适配的笔记。 1. pt 点(Points),绝对长度单位。 印刷业上常使用的单位,磅...1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px 用法: div { font-...
  • pxemrem、rpx 用法 与 区别

    万次阅读 多人点赞 2018-12-11 10:25:01
    PX px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕... Firefox能够调整px和emrem,但是96%以上的中国网民使用IE浏览器(或内核)。 EM em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前...
  • 本文主要介绍了CSS中px em rem区别与使用。具有很好的参考价值。下面跟着小编一起来看下吧
  • 传统页面元素之间度量单位一般以 px 屏幕像素作为单位,但是并非所有的页面像素都是恒定的,比如移动设备就包含320px、375px、425px。。。不可能使用像素为每套设备设计一个页面,当然你说可以用百分比来设计,你...
  • css中单位px和em,rem区别.pdf
  • px是像素,设置字体大小时,比较稳定精确。但是如果改变了浏览器的缩放,页面布局会被打破。因此,这时就提出了使用'em'来定义Web页面的字体。 em是根据基准来缩放字体的大小。em实质是一个相对值,而非具体的...
  • 字体大小同样都是1.5em,但是效果却截然不同,按照W3C提供的公式,我们可以计算下: class为id1的div字体大小继承自父元素body:16px*1.5em = 24px class为id2的div字体大小继承自父元素id1:24px*1.5em = 36px ...
  • html/css–pxemrem区别 一、px是固定的像素,一旦设置了就无法因为适应页面大小而改变。 二、em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。 三、em是相...
  • 介绍px em rem 区别 对比 PX px像素(Pixel):相对长度单位,像素px是相对于显示器屏幕分辨率而言的。 IE无法调整那些使用px作为单位的字体大小; 国外的大部分网站能够调整的原因在于其使用了emrem作为字体单位;...
  • px:实际上就是像素,用px设置字体大小时,比较稳定精准。像素px是相对于显示器屏幕分辨率而言的。 em:就是根据基准来缩放字体大小em的值并不是固定的;em会根据父级元素的字体大小变化。em相对于浏览器的默认...
  • CSS3 px em rem

    2019-08-14 01:09:20
    NULL 博文链接:https://onestopweb.iteye.com/blog/2318759
  • 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小; -2. 国外的大部分网站能够调整的原因在于其...
  • pxem和rem区别

    2020-09-25 01:46:22
    为简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em的值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是将原来的px值除以10,换上em做单位就可以了。 3.rem
  • pxemrem、rpx 作用用法详解

    千次阅读 2018-05-31 18:04:24
    这篇文章记录前端(包含小程序)开发中常用到的几个单位 pxemrem、rpx 的区别和用法。 px px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 1. IE无法调整那些使用px...
  • px em rem 区别及各自的使用场景 1.px px是相对长度单位,像素px是相对于显示器屏幕分辨率而言的. px的特点: (1)IE不能调整以px为单位的元素或字体大小; (2)国外的大部分网站能够调整的原因在于其使用了emrem...
  • px em rem区别 介绍 (Introduction) Beginners in web-development usually use px as the main size unit for ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,788
精华内容 6,715
关键字:

px和em和rem的区别