精华内容
下载资源
问答
  • 区分DPI、分辨率(PPI)、图像的物理大小、像素宽度 分辨率都知道,越高越清晰。 一、描述分辨率的单位有:  dpi(点每英寸)、lpi(线每英寸)和ppi(像素每英寸)。但只有lpi是描述光学分辨率的尺度的。虽然...

    http://www.cnblogs.com/bile/archive/2013/09/05/3303556.html

    区分DPI、分辨率(PPI)、图像的物理大小、像素宽度

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

    一、描述分辨率的单位有:
       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。

    展开全文
  • 逻辑像素与物理像素

    千次阅读 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.widthscreen.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

    展开全文
  • 获取独立像素与物理像素比例值 window.devicePixelRatio 获取设备的物理像素 屏幕的宽度:window.screen.width 屏幕的高度:window.screen.height
    1. 获取独立像素与物理像素比例值
         window.devicePixelRatio
    
    1. 获取设备的物理像素
        屏幕的宽度:window.screen.width
        屏幕的高度:window.screen.height
    
    展开全文
  • Web程序员在开发移动端页面时时常会遇到这样的问题,手机设备商声明的屏幕像素宽度尺寸和网页开发时使用的CSS像素宽度不一致,为什么会出现这种情况呢? 此像素非彼像素 设备像素(device pixel): 设备像素...

    随着移动设备浏览量的迅速增长,自适应网页设计变得越来越重要。Web程序员在开发移动端页面时时常会遇到这样的问题,手机设备商声明的屏幕像素宽度尺寸和网页开发时使用的CSS像素宽度不一致,为什么会出现这种情况呢?

    此像素非彼像素

    设备像素(device pixel):

    设备像素设是物理概念,指的是设备中使用的物理像素。
    比如iPhone 5的分辨率640 x 1136px。

    CSS像素(css pixel):

    CSS像素是Web编程的概念,指的是CSS样式代码中使用的逻辑像素。
    在CSS规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位。px是一个相对单位,设备像素(device pixel)是绝对单位。

    比如iPhone 5使用的是Retina视网膜屏幕,使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以设备像素数为640 x 1136px,而CSS逻辑像素数为320 x 568px。

    设备像素与CSS像素之间的换算是如何产生的呢?

    这就需要要谈到每英寸像素(pixel per inch)设备像素比(device pixel ratio)

    每英寸像素(pixel per inch):

    ppi,表示每英寸所拥有的像素(pixel)数目,数值越高,代表显示屏能够以越高的密度显示图像。ppi的计算方式可以参考维基百科每英寸像素

    设备像素比(device pixel ratio):

    以上计算出ppi是为了得到密度分界,获得默认缩放比例,即设备像素比

    由上图可知,ppi在120-160之间的手机被归为低密度手机,160-240被归为中密度,240-320被归为高密度,320以上被归为超高密度(Apple给了它一个高大上的名字——Retina)。

    获得设备像素比后,便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时,使用1个设备像素显示1个CSS像素。当这个比率为2:1时,使用4个设备像素显示1个CSS像素,当这个比率为3:1时,使用9(3*3)个设备像素显示1个CSS像素。

    美工和WEB前端开发人员之间如何协同

    一般美工按照设备像素(device pixel)为单位制作设计稿。前端工程序员,参照相关的设备像素比(device pixel ratio),进行换算以及编码。

    展开全文
  • 像素真实的物理长度

    千次阅读 2007-07-21 19:37:00
    请拿出一把尺子,丈量你的显示器的可见宽度 (我这里是 11.2992 英寸),除以横向分辨率 (我这里是 1024 像素),得到的就是每个像素物理长度。 注意:通常所说的显示器尺寸不能直接用来作为宽度的概念...
  • 物理像素和设备像素

    2019-09-09 19:49:37
    【学习内容】 DIP----Device Independent Pixel----逻辑像素/设备独立像素/前端像素 Device(第外四)----设备 Independent (因第喷等特)—独立 Pixel—px—像素 PPI----pixels per inch—...100VW------将宽度分...
  • 移动端开发经常遇到一些概念:物理像素、逻辑像素像素密度、像素比等 关键词: 屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等 屏幕尺寸 ...
  • css3物理与逻辑像素

    2019-09-09 18:55:15
    移动端开发经常遇到一些概念:物理像素、逻辑像素像素密度、像素比等,本节来详细介绍下。 屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、vw、vh等。 vw...
  • 关于 css像素px,物理像素(pt),设备像素比(dpr),1px边框问题,viewport自适应等问题。 目录**关于 css像素px,物理像素(pt),设备像素比(dpr),1px边框问题,viewport自适应等问题。** @[TOC](目录)css...
  • CSS像素物理像素
  • 每英寸有多少个像素,称为ppi(pixel per inch)。我们可以简单算算,iPhone 4是640 x 960像素,对角线就是1154像素,除以3.5英寸,应该是330ppi。而官方给出的数字是326ppi。当像素太密,超过300ppi的时候,人眼 也就...
  • 获取设备的物理像素

    2019-03-16 15:26:50
    获取设备的物理像素 <script> // 以像素计,屏幕的大小 var screenWidth = window.screen.width; var screenHeight = window.screen.height; console.log('屏幕的宽度为' + screenWidth); ...
  • 屏幕尺寸 屏幕尺寸指屏幕对角线的长度,单位是英寸,1英寸=2.54厘米 比如常见的屏幕尺寸有2.4、2.8、3.5、3.7...屏幕分辨率是屏幕像素的数量,一般用屏幕宽度像素点乘以屏幕高度的像素点,指的是设备屏幕实际拥有...
  • 前端的物理像素、逻辑像素、1px边框问题
  • 移动端物理像素和设备独立像素

    千次阅读 2018-07-15 21:09:12
    https://blog.csdn.net/aiolos1111/article/details/51880223 ... 最近做移动端页面开发的时候遇到像素比的问题,一脸懵逼,最后看了各路神仙的博客以及自己找资料之后总结了一...
  • 1、物理像素 设备像素,在同一个设备上,它的物理像素是...如果在一个设备中,物理像素与逻辑像素相等,将不会产生任何问题。但是,在iphone 4中,物理像素是640px*960px,而逻辑像素数为320*480px。因此,需要使用大
  • 翻译总结关于CSS的...2.物理像素与逻辑像素,DevicePixedRatio --2.1example: 选择不同质量的位图以适应不同分辨率的屏幕 3.移动端三类视窗的概念,how to get ideal viewport --3.example: 在meta中固定视窗宽度
  • 设备物理像素(设备像素) 设备逻辑像素(设备独立像素) 代码CSS像素 设备像素比 viewport深入理解 1.viewport(可视区域大小)的概念理解和知识积累 (1)移动设备上的viewport就是设备的屏幕上能用来显示网页的那一块区域...
  • 虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px。 1.2 注意 在CSS规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative...
  • m_iWidth = sWidth*96/25.4;//物理宽度转换为像素 物理尺寸单位mm毫米 m_iHeight = dHeight*96/25.4; 转载于:https://www.cnblogs.com/oltra/p/6141345.html
  • 还是从具体的案例来去认识移动端中的各种定义吧。 以最常见的设计图参考iphone6来举个栗子,详细说。 4.7in 2.3*4.1 in ... 2.3(宽度)*4.1(长度) 英寸 高度:宽度 375*667 (points) 750*1...
  • 屏幕尺寸:对角线的长度(厘米) 屏幕分辨率:横纵向上物理像素的个数(物理像素物理像素:分辨率,是屏幕成像的最小单位 ...设备独立像素:是设备对接css像素的接口,一旦css像素与独立像素挂上勾(width=de...
  • 比如iPhone 6的屏幕在宽度方向有750个像素点,高度方向有1334个像素点,所以iPhone 6 总共有750*1334个物理像素。 同一个设备的物理像素是固定的,这是厂商在出厂时就设置好了的。 逻辑像素 逻辑像素是一个抽象...
  • 一、屏幕尺寸 屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米。 常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。...二、物理像素–UI设计师像素物理像素/屏幕分辨率/物理分...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,621
精华内容 8,648
关键字:

像素宽度与物理宽度