移动端开发基础 -- CSS像素和物理像素

最新推荐文章于 2024-09-04 16:11:03 发布
最新推荐文章于 2024-09-04 16:11:03 发布
阅读量518 收藏
点赞数
分类专栏： 移动端 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41387874/article/details/120276814
版权

逻辑像素和物理像素

  • 物理像素
    • 物理像素是指设备实际含有的像素点，一个设备生产之后，它的物理像素就确定了。
  • 逻辑像素
    • 可以理解为CSS像素，CSS像素的单位是px。
  • 逻辑像素和物理像素的关系
    • 在大多数情况下，1个CSS像素等于1个物理像素。
    • 在如iPhone6、7、8等手机中，由于单位面积物理像素更多，这时1个CSS像素可能等于多个物理像素，CSS像素会比1:1的情况下看起来更宽。
  • 为什么要提高单位面积的物理像素个数
    • 因为当像素越多，显示效果就越好，在不增加显示器宽高的情况下，使用2个或更多物理像素来显示1个CSS像素就可以更清晰。
物理像素、CSS像素、dip、dpr、ppi、dpi
weixin_40870788的博客
10-08 2115
物理像素(physical pixel) 物理像素又被称为设备像素（dp），他是显示设备中一个最微小的物理部件。一个设备的物理像素是固定不变的。每个像素可以根据操作系统设置自己的颜色和亮度。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Ret...
移动端基础物理像素、分辨率、逻辑像素、设备像素、缩放、ppi视口、meta
独滕的博客
01-07 964
移动端基础 物理像素 像素点 移动端设备的屏幕都是由一个个点组成的，每个屏幕上的点一定是有限的，现在技术还做不到无限个点，这些点可以叫做像素，或者叫物理像素。 分辨率 每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表达形式是分辨率。 屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细 1px是否=一个物理像素 在早期的屏幕也就是普通屏、标清屏中1css像素 = 1个物理像素 随着Retina（视网膜屏）等技术兴起，能够将更多的物理像素点
CSS像素和物理像素
chen__cheng的博客
05-16 1911
1. CSS像素 什么是CSS像素？ CSS像素又称为逻辑像素，虚拟像素，也称为直觉像素。CSS像素所使用的单位是px。是一个相对单位。 为什么会有CSS像素产生呢？ 屏幕显示是由一个一个不连续的点组成，最小组成单位为物理像素。而在现实生活中，人肉眼看到的是一系列连续的图形，因此采用CSS像素来进行衡量。 而CSS像素是如何计算的呢？ CSS像素是个相对单位，1px等于几个物理像素。 但是仍然存在一定的问题 相同尺寸设备，不同屏幕密度 假设按照1px = 2pt进行显示，有一个盒子大小为6px/3px
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
最新发布
2401_86401423的博客
09-04 1394
一只笔的像素如下：这只笔在屏幕c,d,e下的显示效果如下：看到同一张图片在各屏幕显示大小不一。我们希望不同屏幕显示图片的大小要一致。我们要计算图片缩放比例。计算公式：(图片逻辑像素大小px1) / (图片缩放后实际像素大小px2) = (设备像素dp) / (设备独立像素dips)此时，这只笔在屏幕c,d,e下的显示效果如下：通过上面的我们可以看到，不同的DPR(设备像素比)要想显示大小一样，必须准备三张不同分辨率的图片，那么，我想一张图片就在三种不同的屏幕下显示一样的大小，能做到吗？
物理像素&CSS像素
qq_45021462的博客
09-09 483
1. 屏幕尺寸 屏幕尺寸是手机屏幕的对角线的长度。5.2寸手机，是其对角线长为5.2寸。 1英寸 = 2.54厘米 2. 分辨率（物理像素） 分辨率是屏幕上的像素点数，1920x1080分辨率的手机，表示其横向有1080个像素点，纵向有1920个像素点。这个值是每个手机出厂的时候就设定好的。 3. 分辨率比 1920x1080，比为16:9，这个值也可以看作是手机屏幕比。 4. 屏幕像素密度 PPI （pixel per inch)，即每英寸长度所能显示的像素（pixel）的数目。PPI值越大表示显示屏能以
CSS像素和物理像素（移动端完美视口）
weixin_46636430的博客
11-21 1070
CSS像素和物理像素
CSS像素和物理像素的区别&&像素比DPR
wddthn的博客
01-13 1208
1，物理像素 他也被称为设备像素，他是屏幕的物理单位，他是现实中实际存在的，任何带有屏幕的设备都是有像素组成的，他的像素是在出厂的时候是已经设置好的。 2，css像素 （逻辑像素） 它也被称为设备的独立像素，是web前端开发者构造的，他不是实际存在的，在css和javascript中使用的一个抽象的层，每一个css声明和几乎所有的javascript属性都使用css像素，因此实际上从来用不上设备像素（一个css像素）里可能包含一个或多个像素点，包含的越多屏幕上看的越清晰。（pc端电脑上的物理像素和cs
15-移动端布局基础——DPI、PPI、物理像素、DPR、viewportcss像素、DPR
CapejasmineY的博客
08-06 1087
移动端布局基础——DPI、PPI、物理像素、css像素、DPR、viewport、DPR
移动端 CSS 适配入门 - By PlasticTree
03-17
这意味着每个CSS像素实际上占用两个物理像素。 **应用场景：** 现代的操作系统允许用户调整DPR，特别是在桌面系统上。而在移动设备上，除非进行root操作，否则这一比例通常是固定的。 #### 三、移动设备像素比规律...
（一）移动端前端开发-移动端基础
m0_56517198的博客
02-12 1958
移动web、运行在移动设备上的产品。适配平台：安卓、IOS；H5运行环境分类：移动端浏览器 - 原生APP的webview中（hyBrid模式）- 开发的H5页面镶嵌入到app的webview中显示。移动端屏幕PPI；代表屏幕每英寸的像素数量，即**像素密度**。高PPI屏幕显示的元素会比较精细（看起来会比较小），低PPI屏幕显示的元素相对来说就比较粗糙（看起来会比较大）。DPR设备像素比DPR（devicePixelRatio）是默认缩放为100%的情况下，设备像素和CSS像素的比值。
移动端---总结
qq_50613817的博客
01-07 358
移动端基础知识 1 物理像素(像素点) 物理像素:即设备像素，而物理像素点是屏幕显示的最颗粒，在同一设备上，它的物理像素和物理像素点是固定的。这是厂商在出厂时就设置好的，即一个设备的分辨率时固定的。比如iphone6的物理像素是750px * 1334px。 设备出厂后的每一个像素点，类似一个小灯泡，由屏幕制造商决定，屏幕生产后无法修改。 2 分辨率 每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表示形式，就叫做分辨率 屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容
关于 物理像素 逻辑像素 css px 的一些个人看法
weixin_49596144的博客
04-29 377
px/rem/rpx 相对长度单位 px:pixel 像素，显示设备上最小的显示单位，物理设备的最小（度量）单位，相对单位（分辨率越高，视觉上呈现的越小） pt:point 点，磅值，印刷行业常用单位，计量印刷物品尺寸的最小（度量）单位，大小为1/72英寸 dpr(device pixel ratio 设备像素缩放比)：设备物理像素和设备独立像素的比例， 即：devicePixelRatio = 物理像素 / 独立像素。 window.devicePixelRatio 可以获取当前设备的dpr rem: r
移动端布局介绍——css像素/物理像素/设备像素比
YY的博客
09-27 897
css像素/物理像素/设备像素比
物理像素，css像素的理解,vw的使用以及案例
富在术数不在劳身,利在势局不在力耕。
03-04 534
（1）物理像素=>物理像素只的就是一个小点点 （2）另外一种是css像素=>css像素使我们书写代码的时候书写的单位 >>>浏览器在加载网页的时候，需要将css像素转化成物理像素<<< 默认情况下pc端一个css像素等于一个物理像素 默认情况下移动端的网页都会将980像素css像素，让pc端的网页在移动端也能全部展现出来 最佳像素比设置完美视口 <meta name="viewport" content="width=device-.
如何秒懂 - 物理像素、CSS 像素、CSS 参考像素、设备独立像素？
拯救世界的光太郎
05-11 1898
以口头描述的方式描述一下：物理像素、像素密度、CSS参考像素、CSS像素、设备独立像素、设备像素比、分辨率。本文意在用最短的话，讲清楚这几种像素之间的区别和联系。文章不是太深，因此对于还不能很好地区分这几种像素的同学来说是非常友好的，如果本文对你有帮助，还请多多点赞收藏哈~
移动web的基本概念-设备,物理像素，CSS像素
weixin_45504050的博客
08-08 230
一、屏幕 移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。 通常我们所指的屏幕尺寸实际上是指的屏幕的对角线长度，一般使用英寸来度量，如下图： 而分辨率一般用 像素来度量px, 表示水平与垂直方向的像素数，例如19201080指的是屏幕垂直方向和水平方向分别有19201080个像素点而构成（常规下手机和PC的垂直水平像素是相反的） 如下图所示： 二、长度单位： ...
关于移动段设备物理像素和css像素的一点研究
j455033553的博客
04-23 638
关于移动段设备物理像素和css像素的一点研究写在前面：很多东西还是得自己去计算一遍吧，很多关键词是以in来做测量的，但是我们熟悉的是cm，为了方便理解，有些地方我还是用cm来做说明几个公式 dpr : 物理像素点数/css逻辑像素点（取某一方向，水平或者是垂直，大部分的屏幕水平和垂直的点距都是一样的） 分辨率 : 水平物理像素个数 ＊ 垂直物理像素个数，比如ip6的是1334 * 750,ip6p
移动端开发：HTML+CSS视口与设备像素比解析
本文主要介绍了HTML和CSS在移动端开发中的视口相关知识，包括移动端设备的概念、设备模拟器的使用、常见设备的屏幕尺寸、设计稿的尺寸转换以及设备像素比和视口的概念。 在移动端开发中，移动端指的是能够方便移动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值