px,pt,ppi,dpi,dp,sp,em,rem,vw和vh等css中常用长度之间区别总结

  首先我们大致了解一下每个简称的含义,他们都是在设备中表示长度:

  1. px:(pixel)像素,像素px是相对于显示器屏幕分辨率而言的(引自CSS2.0手册)。电子屏幕上组成一幅图画或照片的最基本单元;
  2. pt: (point)点,印刷行业常用单位,等于1/72英寸,就是我们在Word或者WPS等办公软件中使用的字体大小单位;
  3. ppi: (pixel per inch)每英寸像素数,该值越高,则屏幕越细腻,用于计算机和电视屏幕上每英寸显示的像素点的数量;
  4. dpi: (dot per inch)每英寸多少点,该值越高,则图片越细腻,用于打印;
  5. dp: (dip,Density-independent pixel) 是安卓开发用的长度单位,1dp表示在屏幕像素点密度为160ppi时1px长度;
  6. sp: (scale-independent pixel)安卓开发用的字体大小单位;
  7. em:(emphasize) 是相对长度单位,相对于当前对象内文本的字体尺寸,即em的计算是基于父级元素font-size的;
  8. rem: (root em,根em)是css3新增的一个相对单位,与em的区别在于,它是相对于html根元素的(在body标签里面设置字体大小不起作用);
  9. vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
  10. vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
  11. vmin:vw和vh中较小的那个。
  12. vmax:vw和vh中较大的那个。
    vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,iOS safari 8+支持,Android browser4.4+支持,chrome for android39支持

  下面我们来详细了解一下他们的含义和联系:
1. 看到我们前端页面的css中,有些字体设置成10pt却不是10px我们会有疑惑,pt是什么呢?
  pt(point)是印刷行业常用的单位,等于1/72英寸,就是打印分辨率,表示绝对长度。
1in = 2.54cm = 25.4 mm = 72pt = 6pc
2. DPI和PPI之间的区别是什么呢?为什么有的手机厂家在屏幕参数一栏标注PPI,而有的手机却标注DPI?

  • DPI是Dots Per Inch(每英寸所打印的点数)的缩写,是打印机、鼠标等设备分辨率的单位。这是衡量打印机打印精度的主要参数之一,一般来说,该值越大,表明打印机的打印精度越高。
    px,pt,ppi,dpi,dp,sp,em,rem,vw和vh等css中常用长度之间区别总结_第1张图片
    注意:DPI是手机图片输出的一个衡量标准,一般用于图片打印时调节参数。针对特定的图像而言,图像的像素数是固定的,所以,打印分辨率和打印尺寸便呈现反比的关系。
  • PPI(像素密度)是指屏幕上的像素密度,其计算方法为:
    ppi= 屏幕对角线上的像素点数/对角线长度 = √ (屏幕横向像素点^2 + 屏幕纵向像素点^2)/对角线长度;更直观的如下图所示:px,pt,ppi,dpi,dp,sp,em,rem,vw和vh等css中常用长度之间区别总结_第2张图片
    以4.7英寸的iPhone7为例,屏幕分辨率为1334*750,那么它的像素密度PPI计算方法如下:
    iPhone7 PPI = (1334² + 750²)½ / 4.7 ≈ 326 ppi
    与官方的参数相同:
    px,pt,ppi,dpi,dp,sp,em,rem,vw和vh等css中常用长度之间区别总结_第3张图片
    很多人将二者混为一谈,错把PPI的计算方法当成DPI的计算方法,所以有些商家故意选用数字大的参数标出。比如:
    px,pt,ppi,dpi,dp,sp,em,rem,vw和vh等css中常用长度之间区别总结_第4张图片
    以上图片中PPI计算值为386ppi,DPI计算值为480dpi。
    3.dp和px的关系?
      px是像素,是屏幕上显示数据的最基本的点,表示相对大小。然而dp为安卓开发时的长度单位,根据不同屏幕的分辨率,与px有不同的对应关系。安卓端屏幕的大小各不相同,根据其像素密度,分为以下几种规格:
    px,pt,ppi,dpi,dp,sp,em,rem,vw和vh等css中常用长度之间区别总结_第5张图片
    由上图可知:1dp定义为屏幕密度值为160ppi时的1px,即,在mdpi时,1dp = 1px。 以mdpi为标准,这些屏幕的密度值比为:ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3;即,在xhdpi的密度下,1dp=2px;在hdpi情况下,1dp=1.5px。其他类推。
    4.sp和dp的关系?
      dp和sp都是安卓开发时候的单位,dp是长度单位,sp是字体单位。sp和dp类似,但是可以根据用户字体大小首选项进行缩放。Android系统允许用户自定义文字尺寸大小(小、正常、大、超大等等)。
    5. em和rem的用途和区别?
      em是相对长度单位,相对于当前对象内文本的字体尺寸,即em的计算是基于父级元素font-size的。比如:

<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            body{
                font-size: 12px;
            }
            header{
                width:100%;
                height: 4em;
                background-color:#ccc;
                font-size: 24px;
                text-align: center;
            }
            header div{
                font-size:2em;
            }
        style>
    head>
    <body>
        <div id="container">
            这里是12px
            <header>
                这里是24px
                <div>这里是48pxdiv>
            header>
        div>
    body>
html>

  em是css3新增的一个相对单位,与em的区别在于,它是相对于html根元素的(在body标签里面设置字体大小不起作用)。还是上面那个例子,如果换做rem,结果如下:


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            html{
                font-size: 24px;
            }
            body{
                font-size: 1rem;
            }
            header{
                width:100%;
                height: 48px;
                background-color:#ccc;
                font-size: 1rem;
                text-align: center;
            }
            header div{
                font-size:1rem;
            }
        style>
    head>
    <body>
        <div id="container">
            这里是24px
            <header>
                这里是24px
                <div>这里是48pxdiv>
            header>
        div>
    body>
html>

学习网址推荐:

  • px、pt、ppi、dpi、dp、sp之间的关系
  • 设计师应该懂得分辨率知识DPI和PPI
  • 手机屏幕的DPI是什么和PPI又有什么区别
  • pt,px,rem和em之间区别总结
  • CSS中强大的EM和弹性布局

你可能感兴趣的:(CSS3)