• 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单位转换工具
  • 相关阅读:
    VS Code 开发统一代码格式化配置
    可视化—AntV G6学习笔记实现节点连线及展开收缩分组
    webpack性能优化方式之dll webpack.dll.config.js
    Delphi中取得程序版本号
    EKP Ajax
    EKP 笔记
    idea properties文件中unicode 编码设置小写
    EKP XForm
    TortoiseSvn不显示图标问题
    Unity 在编辑器中输入字符串时,转义字符的输入
  • 原文地址:https://www.cnblogs.com/my-freedom/p/6856478.html
Copyright © 2020-2023  润新知