美文网首页
CSS布局基础(一)--设备独立像素、设备像素

CSS布局基础(一)--设备独立像素、设备像素

作者: Caesar_emperor | 来源:发表于2020-05-01 17:36 被阅读0次

    很多文章都讲过这个概念了,我这里就再口语化的讲讲,这为后面设置CSS和页面控制有助于理解,也就是提一提可能很多大神都明白的,说的不好的勿喷

    一、三种单位

    • px:像素单位
    • em:相对单位
    • pt:绝对单位
      1)px可以在计算机屏幕、打印机和其它的高分辨率设备上,达到预期的效果
      2)em常用来制作可伸缩的样式表。当给定了一个父元素的字体大小,就可以通过调整一个元素来成比例的改变所有元素大小
      3)pt是能够使用测量设备测得的长度。它们不能够缩放

    二、屏幕尺寸

    手机屏幕对角线的长度即屏幕尺寸,这里提一句:1英寸(inch)=2.54厘米(cm),尺子一量即可

    三、分辨率

    一个点、面、线、照片等都是由一个个小方格组成


    image.png

    各位在手机上看到的1920PX*1080PX说的也就是纵向有1920个小方格,横向有1080个小方格,当width设置1080则占满整个屏幕

    四、屏幕像素密度(PPI,即对角线长度为1英寸的正方形内所拥有的像素数,也就是单位面积所含的像素点数量,越多越清晰)

    就是屏幕的横向的平方加纵向的平方的和开根号后除以屏幕尺寸

    五、设备独立像素 (一个总体概念,包括CSS像素)

    这个有点抽象,举个例子说。iPhone 3和iPhone 4屏幕尺寸一样,但后者的像素密度是前者的两倍,使用物理像素作为单位在web中设置尺寸是不合理的。iPhone 3物理像素是320480,iPhone 4的物理像素是640960,但是它们的设备独立像素都是320480,iPhone 4用4个物理像素表示1个设备独立像素(横向2个物理像素表示1个设备独立像素,纵向2个物理像素表示一个设备独立像素*),因此操作系统定义设备独立像素,用设备独立像素定义的尺寸,不管屏幕的参数如何,都能以合适的大小显示。

    <!--获取设备独立像素的宽高-->
    screen.width
    screen.height
    <!--获取浏览器可用显示区域的大小,也就是浏览器中间负责显示的部分-->
    window.innerWidth
    window.innerHeight
    

    六、物理像素/设备像素

    出厂前,定好的分辨率

    七、设备像素和设备独立像素之间的关系

    PC端: 1个设备独立像素 = 1个设备像素 (这是在100%,未缩放的情况下;如果缩放到200%可以说1个设备独立像素 = 2个设备像素),即屏幕变大,设备独立像素里小方格更多,就会是从1:1,慢慢增加到1:n
    移动端: 根据设备不同有很大的差异,根据 ppi 不同我们可以得到不同的换算关系,标准屏幕(160ppi)下 1个设备独立像素 = 1个设备像素

    八、DPR设备像素比

    可以将程序中使用到的CSS像素转换为设备像素,解决同样的图片在不同移动终端上显示存在差异的问题

    • 当设备像素比为1:1时,使用1(1×1)个设备像素显示1个CSS像素;
    • 当设备像素比为2:1时,使用4(2×2)个设备像素显示1个CSS像素;
    • 当设备像素比为3:1时,使用9(3×3)个设备像素显示1个CSS像素。
      设备像素/设备独立像素,在JS中可以通过 window.devicePixelRatio 获取

    非标准屏幕上以同样大小显示同一张图片时:

    需要缩放图片,依照公式处理 QQ图片20200501172941.png

    举个例子讲:
    在CSS中设置图片大小为100px,要在dpr为2:1(即在一个方向上2个设备像素长度代表1个CSS像素长度)的屏幕上同比例显示,就需要先放大这个图片到2被大小,即200px,这样我们在设备上对于图片的直观感受才是和标准屏幕相同

    相关文章

      网友评论

          本文标题:CSS布局基础(一)--设备独立像素、设备像素

          本文链接:https://www.haomeiwen.com/subject/xjjgwhtx.html