zoukankan      html  css  js  c++  java
  • css中的单位px,em和rem的区别

    一、px:

    px就是像素,用px设置字体大小的时候会比较精确,但是有时候我们会使用不同屏幕尺寸去浏览网页。当页面相应的扩大或者缩小的时候,页面的字体大小就会出现过小或者过大。由于这种问题,就提出了使用em来定义页面上字体大小。

    二、em

    em是一个相对的值,而不是一个具体的值,是根据一定的比例去缩放字体,那么就会出现一个问题,em的值是相对于谁的大小来缩放的,也就是说,缩放的基准是什么?一般来说,em的大小是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

    除了浏览器的初始字号设置之外,em也可以从包含标签中继承尺寸信息。一个0.9em的类型尺寸将使文本在大部分以16px为基础尺寸的显示器上为大约14px高。但是如果你有一个带.9em的字号的<p>标签,然后在这个<p>标签中有一个带0.9em的<strong>标签,这个<strong>标签的em尺寸就不是14px而是12px(16*0.9*0.9)。因此在使用em值时要记住继承这个特性。

    三、rem:


    rem是css3提出的新属性,一般用于移动端。rem也是一个相对值,但是rem是相对于根元素(html)来说的。这样的话可以做到只修改根元素便可以调整所有字体大小。任意浏览器的默认字体高都是16px,因此我们可以简化简化font-size换算的方法:将body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

    目前,除了IE8及更早版本外,所有浏览器均已支持rem。

    在这里为大家提供一个px,em,rem单位转换工具
  • 相关阅读:
    线段树专辑—— pku 1436 Horizontally Visible Segments
    线段树专辑——pku 3667 Hotel
    线段树专辑——hdu 1540 Tunnel Warfare
    线段树专辑—— hdu 1828 Picture
    线段树专辑—— hdu 1542 Atlantis
    线段树专辑 —— pku 2482 Stars in Your Window
    线段树专辑 —— pku 3225 Help with Intervals
    线段树专辑—— hdu 1255 覆盖的面积
    线段树专辑—— hdu 3016 Man Down
    Ajax跨域访问
  • 原文地址:https://www.cnblogs.com/my-freedom/p/6856478.html
Copyright © 2011-2022 走看看