zoukankan      html  css  js  c++  java
  • CSS单位PX、EM、REM、PT的区别

     

    CSS单位PXEMREMPT的区别

     

    1、PX :像素(Pixel)

    PX是相对长度单位,它是相对于显示器屏幕分辨率而言的。

    优缺点:较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。

    2、EM:是相对长度单位。

    EM是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

    优缺点:EM的值并不是固定的,它会继承父级元素的字体大小。

    EM和PX的之间的相互转换:

    任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

    为了使用方便,用em时,我们通常在CSS中的body选择器中声明font-size=62.5%(使em值变为 16px*62.5%=10px), 之后,你只需要将你使用的px值除以10,即可得到em值,如:12px=1.2em, 10px=1em。

    3、REM :是CSS3新增的一个相对单位(root em,根em)

    REM是相对单位,是相对HTML根元素。

    这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

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

    4、PT :印刷业上常使用的单位

    PT是磅的意思,一般用于页面打印排版。

    个人推荐:

    PC端固定宽度的页面使用px;

    PC端自适应页面使用em;

    移动端使用rem。

  • 相关阅读:
    7人脸识别
    1图片视频文件操作基础
    3直方图与二值化,图像梯度
    6模板匹配(人脸匹配案例)
    基础习题
    碎片知识点整理
    详解:MySQL数据表损坏的正确修复方案
    前端开发:模块化 — 高效重构
    分享几个基于jQuery不错的前端相册展示插件代码
    程序员编程10年的心得和体会
  • 原文地址:https://www.cnblogs.com/shenyulin/p/4597597.html
Copyright © 2011-2022 走看看