精华内容
下载资源
问答
  • 像素宽度与物理宽度
    千次阅读
    2021-01-13 18:19:51

    分辨率都知道,越高越清晰。

    一、描述分辨率的单位有:

    dpi(点每英寸)、lpi(线每英寸)和ppi(像素每英寸)。但只有lpi是描述光学分辨率的尺度的。虽然dpi和ppi也属于分辨率范畴内的单位,但是他们的含义与lpi不同。而且lpi与dpi无法换算,只能凭经验估算。

    另外,ppi和dpi经常都会出现混用现象。但是他们所用的领域也存在区别。从技术角度说,“像素”只存在于电脑显示领域,而“点”只出现于打印或印刷领域。

    二、怎么知道一张图片的分辨率?

    以JPEG为例,用16进制编辑器打开文件,文件头的信息通常为

    FF D8 FF E0 XX XX 4A 46 49 46 00 XX XX (XX表示不同的jpg此处可能不同)

    之后就是DPI值,如

    01 00 60 00 60 - 水平分辨率和垂直分辨率的值是96

    01 01 2C 01 2C - 水平分辨率和垂直分辨率的值是300

    如果第一个数字是01表示水平分辨率和垂直分辨率的计算单位是英寸;是02,表示水平分辨率和垂直分辨率的计算单位是厘米。

    第一个00 60/01 2C表示水平分辨率是96/300。

    第二个00 60/01 2C,表示垂直分辨率是96/300。

    00 60 (十六进制) = 96 (十进制)

    01 2C (十六进制) = 300 (十进制)

    另外,如果此处的代码可能是00 00 01 00 01,这时图片的分辨率与显示器的DPI值相同。

    三、图片的物理大小和像素、分辨率的关系

    图像的物理宽度(以英寸为单位)等于像素宽度除以水平分辨率。 例如,像素宽度为 216、水平分辨率为 :72 点/英寸 的图像,它的物理宽度:216/72= 3 英寸。 也同样适用于像素高度和物理高度。

    使用图像的物理大小绘制图像,无论显示设备的分辨率(每英寸点数)是多少,图像大小(以英寸为单位)都是正确的。 例如,假定图像的像素宽度为 216,水平分辨率为 72 点/英寸。 如果调用此方法在分辨率为 96 点/英寸的设备上绘制该图像,则所呈现图像的像素宽度就是: (216/72)*96 = 288。

    更多相关内容
  • 关于像素值,我们知道一张图片就是在物理尺寸上放置一个一个色彩单元构成,而每个色彩单元成为像素点,像素点的个数即为像素值,因此在发布一步新手机的时候,经常可以听见某某手机拍照的像素值可达到多少多少。...

    概念: 

    • 物理尺寸 

    关于物理尺寸,简单来说就是印刷品(图片)的实际物理大小。常用的物理单位有厘米(cm)、毫米(mm)、英寸(inch),其中英寸和厘米的换算单位如下:

    • 像素值

    关于像素值,我们知道一张图片就是在物理尺寸上放置一个一个色彩单元构成,而每个色彩单元成为像素点,像素点的个数即为像素值,因此在发布一步新手机的时候,经常可以听见某某手机拍照的像素值可达到多少多少。

    • 分辨率

    单位长度(物理长度)内,所包含的像素点的数量叫做图片分辨率,在计算机领域,表示图片常用的物理尺寸为英寸(inch),那么简单来说,分辨率就是一张图片在一英寸的大小尺度类包含多少个像素点。

    单位:

    ppi:(全称为Pixels Per Inch),中文名为每英寸像素点个数,是指图像中每英寸长度内有多少个像素点。

    lpi:(全称为screen density),中文名为网线数,是指一个印刷品在一英寸长度内的行数,lpi的大小代表一英寸内印刷线条的数量。

    dpi:(全称为Dots Per Inch),是指每英寸的像素,也就是扫描精度。DPI越低,扫描的清晰度越低.

    关于ppi与dpi的区别:

    dpi面向的是印刷受体,而ppi面向的是荧幕。dpi和ppi是两个概念,dpi是Dot Per Inch的缩写,每英寸所打印的点数或线数,用来表示打印机打印分辨率。这是衡量打印机打印精度的主要参数之一。一般来说,该值越大,表明打印机的打印精度越高。ppi是Pixels Per Inch缩写,是图像分辨率的单位,图像ppi值越高,画面的细节就越丰富。

    实例:

    这里有一张图片,鼠标右键->属性->详细信息,可以看到这张照片的分辨率为333*500,即改张照片的宽有333个像素点,高有500个像素点,那么像素值的大小为166500;该图片的分辨率为96dpi*96dpi,那么该图片的尺寸应为宽:333/96 = 3.46875‬,高为500/96 = 5.20833。

    展开全文
  • 随着分子束外延(MBE)和金属有机物化学气相淀积(MOCVD)技术的成熟发展,可以在半导体衬底上均匀生 长原子量级的超薄层田,通过两种半导体材料的交替生长,形成一系列周期性的势垒和势阱,这就是所谓的超晶 格...
  • 逻辑像素与物理像素

    千次阅读 2019-09-21 05:09:41
    物理像素 设备屏幕实际拥有的像素点。比如一个图片,细分最小单位就是像素,也就是说图片是由许多的像素构成。 一个设备生产出来,他们的像素就已经确定了,iphone5的分辨率是640*1136px,代表屏幕的宽是640px,高...

    物理像素

    设备屏幕实际拥有的像素点。比如一个图片,细分最小单位就是像素,也就是说图片是由许多的像素构成。

    一个设备生产出来,他们的像素就已经确定了,iphone5的分辨率是640*1136px,代表屏幕的宽是640px,高是1136px。

    逻辑像素

    也叫“设备独立像素”(Device Independent Pixel,DPI)可以理解为反映在CSS里的像素点,也就是说CSS像素是逻辑像素的一种。

    CSS像素的单位也叫PX。他是图像显示的基本单元。

    CSS像素=设备独立像素=逻辑像素

     

    注:

    (1)为了保证阅读体验的一致性,CSS像素可以自动在不同设备之间调节

    (2)默认情况下,一个CSS像素等于一个物理像素的宽度。但是在高像素密度的设备上,CSS像素甚至在默认情况下相当于多个物理像素的尺寸。比如iPhone的屏幕对比一般的手机屏幕会看起来更精细清晰一些。

    (3)iPhone6,7,8都是两倍屏手机,即一个CSS像素等于两个物理像素。iPhone6Plus等于三倍屏手机,即一个CSS像素等于3个物理像素。

    (4)以iPhone6为例,设计稿给出一个图片的宽高为40*40,在实际开发中要除以2,宽高要写成20*20,因为iPhone6是两倍屏手机。

     

    设备像素比(Device Pixel Ratio,DPR)

    表示一个设备的物理像素与逻辑像素的比。

    像素为什么会有“物理”和“逻辑”之分,他们之间有什么区别?

      在很久以前,的确没有区别,CSS里写1px,屏幕就给你渲染成1个实际的像素点,所以DPR=1。

      但是后来苹果公司为其产品mac、iPhone等的屏幕配置了Retina高清屏,也就是说这种屏幕拥有的物理像素点比非高清屏多4被甚至更多。如果还按照DPR=1进行展示,那么同一张图片在高清屏上显示的区域面积会是非高清屏的1/4,这样的话图片在屏幕上的展示面积大大缩小,也就会导致看不清的问题。

      举个栗子,iPhone6的物理像素是750*1334,那么它的逻辑像素是多少? 我们只需要打印一下screen.width和screen.height就知道了,结果是375*667,这就是它的逻辑像素,所以DPR=2,我们也可以通过打印window.devicePixelRatio来获取设备像素比。

     

    分辨率

    也叫解析度,可以从屏幕分辨率和图像分辨率两个方向来分类。

    屏幕分辨率:是屏幕图象的精密度,是指显示器所能显示的像素有多少,即显示器可以显示的小方块有多少。

    • 显示器的可显示的小方块越多,画面就越精细,同样的屏幕区域内能显示的信息也就越多。
    • 显示分辨率一定的情况下,显示屏越小图像就越清晰,反之,显示屏大小固定时,显示分辨率越高图像越清晰。(小方块一样多的情况下,显示屏越小越清晰;屏幕大小一样大的时候,小方块越多图形越清晰)

    一个逻辑像素等于多少个物理像素是由设备本身决定的,可以通过DPR也就是设备像素比window.devicePixelRatio获知。

     

    像素密度(PPI)

    像素密度的数值越高,代表显示屏能够以越高的密度显示图像,画面的细节就会越丰富。

    以Retina屏幕为例,他并不是象普通显示器那样通过增大尺寸来增加分辨率,而是靠提升屏幕单位面积内的像素数量,即像素密度来提升分辨率,这样就有了高像素密度屏幕。

     

    移动端1物理像素边框的实现

    问题产生的原因:

    Retina屏会以2个(乃至3个)物理像素来显示一个CSS像素(1px)所以在CSS中指定的1px边框实际上占用2个以上的物理像素,使得用户体验较差。

    解决方案:

    (1)使用0.5px(CSS像素)

    问题:并不是所有浏览器都能识别0.5px,只在Firefox和Safari 8+支持,安卓不支持。有的系统里0.5px会被当作0px来处理。

     

    (2)用媒体查询根据设备像素比用“伪元素+transform”对边框进行缩放。

    对于2倍屏 transform:scale(0.5)

    对于三倍屏  transform:scale(0.33)

    可以使用CSS的-webkit-min-device-pixel-ratio媒体查询针对不同的DPR作出处理。下面以Less代码为例:

    @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
        .border-bt-1px{
            position: relative;
            :after{
                position: absolute;
           left:0;           
           bottom:
    0; width: 100%; height: 1px; background: #ee2c2c; transform: scaleY(0.5); } } }

     

    (3)使用box-shadow模拟边框

    .box-shadow-1px{
        box-shadow: 0px 1px 1px -1px #ee2c2c;
    }

    优点:代码好,兼容性好。缺点:边框有阴影,颜色浅

     

     

     

    rpx

    rpx是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定的屏幕宽度是750rpx。

    无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度。拿iPhone6来讲,屏幕宽度为375px,把它分为750rpx后,1rpx=0.5px=1物理像素

    rpx换算成px等于屏幕宽度/750  

     

    转载于:https://www.cnblogs.com/xiaoan0705/p/11268584.html

    展开全文
  • 逻辑像素物理像素 二倍图技术 屏幕宽度获取 h5媒体查询 js获取视口的宽度 设备划分 pc端大屏 > 1200px 超小屏 :phone 320px-750px 小屏; pad 768px-1024px 中屏: 992px-1200px 视口 移动设备上...

    目录

    设备划分

    视口

    逻辑像素和物理像素

     二倍图技术

    屏幕宽度获取

    h5媒体查询

    js获取视口的宽度


    设备划分


    pc端大屏 > 1200px

    超小屏 :phone 320px-750px

    小屏; pad 768px-1024px

    中屏: 992px-1200px

    视口


    移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,比如布局视口开始为了在手机上展示pc端页面就设置为980px的宽度.

    2个视口总结如下:

    • layout viewport(布局视口):在PC端上,布局视口等于浏览器窗口的宽度。而在移动端上,由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里,此时的布局视口会远大于移动设备的屏幕,宽度一般为980px。

    • ideal viewport(理想视口):布局视口的一个理想尺寸,只有当布局视口的尺寸等于设备屏幕的尺寸时,才是理想视口。

    •  

       

      利用meta标签对viewport进行控制

      移动设备默认的viewport是layout viewport,也就是那个比屏幕要宽的viewport,但在进行移动设备网站的开发时,我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢?这就该轮到meta标签出场了。

      我们在开发移动设备的网站时,最常见的的一个动作就是把下面这个东西复制到我们的head标签中:

      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
      
      device-width设备宽度  width=device-width   视口宽度= 设备宽度

      逻辑像素和物理像素


     物理像素: 生活当中

    逻辑像素(设备独立像素): css像素 写代码

    pc端 1物理像素=1逻辑像素 1980px分辨率 css宽度=1980px

    移动端 1物理像素=n*1逻辑像素

     

    分辨率:ppi

    手机尺寸:对角线长度(英寸)

    pc 端: 1物理= 1逻辑 = 1csspx 倍率= 物理像素/逻辑像素

    移动端: 1逻辑像素 = 1css像素

     二倍图技术

    为了保证图片在移动端的正常展示,我们需要2倍图才能正常呈现 ,也就是说我们的图片比我们插入图片的盒子宽高要大两倍

    所以写代码时 我们要将图片缩小2倍 再插入到盒子里 才能保证图片不失真.

    background-size:图片/2px  图片/2px;
    background-position: xpx/2 ypx/2; 

    屏幕宽度获取


    h5媒体查询

    (1)查询的设备 print 打印机  or  screen屏幕

              (2) 查询的条件 width设备宽度 height设备高度 min-width 最小宽度 max-width:最大宽度

              注意: 满足css选择器的优先级!!!!

    @media  设备类型   and  (查询条件)  {
        
        //代码  只有查询条件被满足才会执行这里的代码
    }
    
    设备类型:  screen设备屏幕      print 打印机
    
    @media   screen   and  (width:414px) {
        
        .box {
            baclground-color:red;
        }
        
    }
    @media   screen   and  (min-width:414px) {
        //大于等于 414px 宽度的屏幕
        .box {
            baclground-color:yellow;
        }
        
    }
    @media   screen   and  (max-width:992px) {
        //小于等于 992px 宽度的屏幕
        .box {
            baclground-color:blue;
        }
        
    }
    
    992px ---1200px 需求
    @media   screen   and  (max-width:1200px)  and  (min-wdith:992px ){
        //小于等于 992px 宽度的屏幕
        .box {
            baclground-color:orange;
        }
        
    }

    js获取视口的宽度

    var screenWidth = document.documentElement.clientWidth;

     

    // 当前屏幕宽度对应的html字体大小=当前屏幕宽度*设计稿下预设置的html字体大小/设计稿的宽度!!!
    
    //当前屏幕的宽度 js方法获取当前屏幕宽度
    var currSreenWidth = document.documentElement.clientWidth;
    
    if( currSreenWidth>750){
        currSreenWidth=750;
    }
    //设计稿下预设置的html字体大小 为了好算 100px
    var prevFS = 100;
    
    //设计稿的宽度 375px
    var psdWidth = 375;
    
    //当前屏幕宽度对应的html字体大小 currHtmlFS 
    
    var currHtmlFS  = currSreenWidth*prevFS/psdWidth;
    console.log(currHtmlFS);
    
    //将计算结果赋值给html的字体大小属性
    document.documentElement.style.fontSize = currHtmlFS +'px';

     

     

    展开全文
  • 做图像时,常常因为不方便测量图片中某个物体长度而郁闷,夏克屏幕尺,是我无意发现的工具,很方便。
  • 随着分子束外延(MBE)和金属有机物化学气相淀积(MOCVD)技术的成熟发展,可以在半导体衬底上均匀生 长原子量级的超薄层田,通过两种半导体材料的交替生长,形成一系列周期性的势垒和势阱,这就是所谓的超晶 格...
  • 1.1物理像素 手机屏幕横向有828个点 手机屏幕纵向上有1792个点 同等大小屏幕下,点越多、图像显示越精细 上面所说屏幕上一个个点就是物理像素(physical pixel) 物理像素也叫设备像素(dp:device pixel) 1.2逻辑...
  • 文章目录前言一、物理像素比二、二倍图三、背景缩放单位 前言 手机和电脑的屏幕都是由一个个的像素点排列组成的. 电脑端的1px和一个物理像素是一一对应的. 一、物理像素比 一个px能显示的物理像素点的个数, 称为...
  • 【机器视觉】——平面测量实际尺寸(像素尺寸转物理尺寸)
  • 移动端物理像素和设备独立像素

    千次阅读 2018-07-15 21:09:12
    https://blog.csdn.net/aiolos1111/article/details/51880223 ... 最近做移动端页面开发的时候遇到像素比的问题,一脸懵逼,最后看了各路神仙的博客以及自己找资料之后总结了一...
  • 获取设备的物理像素

    千次阅读 2019-03-16 15:26:50
    获取设备的物理像素 &lt;script&gt; // 以像素计,屏幕的大小 var screenWidth = window.screen.width; var screenHeight = window.screen.height; console.log('屏幕的宽度为' + screenWidth); ...
  • 移动端开发经常遇到一些概念:物理像素、逻辑像素像素密度、像素比等 关键词: 屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等 屏幕尺寸 ...
  • m_iWidth = sWidth*96/25.4;//物理宽度转换为像素 物理尺寸单位mm毫米 m_iHeight = dHeight*96/25.4; 转载于:https://www.cnblogs.com/oltra/p/6141345.html
  • 单个像素代表的实际物理尺寸

    千次阅读 2020-09-03 17:07:49
    单个像素代表的实际物理尺寸 简单点说,对于单目相机,没有单个像素代表的实际物理尺寸这个概念。 这个问题容易想明白,以下面这张图为例:只考虑简单的小孔相机模型,那橙色射线上的每个点投影到图片上都是同一个点...
  • 每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表达形式是分辨率。 屏幕尺寸相同的手机,包含的像素点个数是不确定的,像素点越小,同一方向上容纳的像素个数就越多,图像显示就越精细 1px是否=一个...
  • 分辨率与物理尺寸关系目前绝大部分显示器都是基于点阵的同样的分辨率下,每个小点的尺寸仍然是可以大可以小的DPI(点每英寸)PPI(像素每英寸)转换关系扩展显示识别数据 EDID(extended display identification ...
  • 视)的属性initial-scale(谷歌翻译为:初始规模)为1时,页面大小正常,但initial-scale(谷歌翻译为:初始规模)为0.5时,页面被缩小了1倍,像素比为2:1的设备本来1个CSS像素宽度占2个物理像素宽度,缩小后的1个...
  • CSS像素物理像素
  • 前端的物理像素、逻辑像素、1px边框问题
  • 物理像素比 指的是开发中和实际像素之间的比例 (iphone 8 物理像素比为 2 即开发中 20px 相当于实际手机中的 40px ) 二倍图 实际使用中通过手机像素比 放大2倍 以后,图片会变得不清楚,变模糊。所以需要二倍图 ...
  • 物理像素和设备像素

    2019-09-09 19:49:37
    【学习内容】 DIP----Device Independent Pixel----逻辑像素/设备独立像素/前端像素 Device(第外四)----设备 Independent (因第喷等特)—独立 Pixel—px—像素 PPI----pixels per inch—...100VW------将宽度分...
  • 1.QString 用length()返回字符串的长度,即字节数, 在中英文字符都是以 Unicode 方式编码的,所以,无论中英文都算的长度为 1。 想要取得英文长度为 1 中文长度为 2 的总长度,...//这个就获得了字符串所占的像素宽度
  • 2、分辨率:是指宽度上和高度上最多能显示的物理像素点个数 3、点距:像素与像素之间的距离,点距和屏幕尺寸决定了分辨率大小 4、PPI:屏幕像素密度,即每英寸(1英寸=2.54厘米)聚集的像素点个数,这里的一英寸还是...
  • 获取独立像素与物理像素比例值 window.devicePixelRatio 获取设备的物理像素 屏幕的宽度:window.screen.width 屏幕的高度:window.screen.height
  • 最近看了很多这方面的文章,能搜到的...虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px。 1.2 注意 在CSS规范中,长度单位可以分为两...
  • 本文实例讲述了android获取屏幕高度和宽度的实现方法。分享给大家供大家参考。具体分析如下:我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现。下面就介绍讲一讲如何获取屏幕的...
  • 1、PX(CSS pixels)1.1 定义虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px。...在同样一个设备上,每1个CSS像素所代表的物理像...
  • (这项指标是连接数字世界与物理世界的桥梁),1英寸是一个固定长度,等于2.54厘米,大约是食指最末端那根指节的长度。像素密度越高,代表屏幕显示效果越精细。(比如 iphone4 的屏幕尺寸是3.5,像素分辨率是 960 * ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,463
精华内容 9,785
热门标签
关键字:

像素宽度与物理宽度