关于像素，分辨率，viewport，设备像素，css像素，Retina

最新推荐文章于 2023-02-01 16:43:18 发布
最新推荐文章于 2023-02-01 16:43:18 发布
阅读量2.7k 收藏 4
点赞数 1
分类专栏： 移动前端 文章标签： 关于像素 分辨率 viewport 设备像素 css像素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ttongzw/article/details/38659921
版权
本文探讨了像素、分辨率、PPI的概念，以iPhone4s为例，介绍了设备像素、CSS像素以及视觉视口和布局视口的区别。讨论了Retina屏幕的特性，并解释了`<meta name="viewport" content="width=device-width">`的作用，帮助理解移动端响应式开发中的关键概念。
摘要由CSDN通过智能技术生成

做移动的响应式开发也有段时间了，但对于标题所说的一个关键字，并没有每个都完全弄清楚，利用空闲时间好好做个整理（以iphone4s为例说明）。

1. 先说一下像素的概念

像素是度量的单位，可以理解为点。点组成线，线组成面，一个页面也就是有n多个像素点组成。

2. 分辨率

像素的概念和分辨率分不开。我们平时都调整过电脑桌面的分辨率，分辨率越高，我们看到的内容会越清晰，字也会越小；分辨率越小，内容越模糊，字也会越大。

什么是分辨率呢？官方的回答是：分辨率是屏幕图像的精密度，是指显示器所能显示的像素的多少。

iphone4s的分辨率是960像素×640像素，即横向能显示640个像素点，纵向显示960个像素点。

3 .PPI :是每英寸所拥有的像素（Pixel）数目

iphone4s是3.5英寸，这个英寸为斜线的距离

那么PPI的计算就为  

最低0.47元/天 解锁文章
remy303
关注
专栏目录
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport(1)
2401_84092456的博客
05-05 307
一只笔的像素如下：自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
移动端基础物理像素、分辨率、逻辑像素、设备像素、缩放、ppi视口、meta
独滕的博客
01-07 966
移动端基础 物理像素 像素点 移动端设备的屏幕都是由一个个点组成的，每个屏幕上的点一定是有限的，现在技术还做不到无限个点，这些点可以叫做像素，或者叫物理像素。 分辨率 每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表达形式是分辨率。 屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细 1px是否=一个物理像素 在早期的屏幕也就是普通屏、标清屏中1css像素 = 1个物理像素 随着Retina（视网膜屏）等技术兴起，能够将更多的物理像素点
设备像素，设备独立像素，CSS像素 & meta viewport
HansExploration的博客
03-22 870
前言这两个属性说难不难，说容易又不易容。但如果你弄明白了这个，你就明白了一些东西，一些你常常用但却不知道为什么的代码。下面我们还是先从它们各自的定义开始说起，其实虽然标题里是三个名词，但我们接下来只聊两个就可以了，为什么？看完你就知道了。基本定义设备像素：设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。CSS像素：CSS像...
设备像素和CSS 像素
Mofeng的专栏
05-30 1410
我们需要理解设备像素和CSS像素的概念，以及二者之间的差异。设备像素，顾名思义，就是设备的像素，它说明了设备的分辨率，一般我们可以通过screen.width/height来得到。而CSS像素是我们前端开发常用的，比如设置某个div的宽度是128px, 实际上是指CSS像素。 假如我们的浏览器宽度是1024px，那么在最大化窗口的情况下，浏览器宽是div宽的8倍；但如果我们放到浏览器窗口，比如放
css像素与设备像素问题
weixin_38999683的博客
07-30 242
Window 属性 devicePixelRatio 能够返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率。此值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小的比值。简单地说，这告诉浏览器应该使用多少个屏幕的实际像素来绘制单个 CSS 像素。 ...
【CSS】聊一聊CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别
isHoMeTown的博客
11-01 470
大家好，我是HoMeTown，顺着计量单位，想继续聊一下CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别。众所周知，在CSS中我们通常是使用pxcss中的像素就是设备的物理像素。其实不然，css中的像素只是一个抽象的单位，在不同的设备与环境中，css中的1px所代表的设备物理像素是不同的，以移动端为🌰，在做移动端开发时，就会出现1px的问题，在不同机型的移动设备上，显示的效果却又很大的差异。这就涉及到设备像素、css像素、设备独立像素、dpr、ppi的概念。
viewport（物理像素、逻辑像素|CSS像素、PPK的3个理论、搭配meta标签用法、注意点）、移动端适配
AIWWY的博客
09-27 754
目录 viewport 物理像素 逻辑像素（CSS像素） PPK的关于三个viewport的理论（可以不用理解） 搭配meta标签用法 width|height initial-scale maximum|minimum-scale user-scalable 注意 移动端适配 viewport 用户网页的可视区域。手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样...
HTML5移动端开发中的Viewport标签及相关CSS用法解析
11-21
对于高像素密度（如Retina屏幕）的设备，理想视口的尺寸通常是物理像素除以设备像素比（DPR, Device Pixel Ratio）得到的CSS像素值。 4. **设备逻辑像素（dip, device-independent pixel）**： dip是一种抽象的...
CSS3 viewport与像素密度在移动端响应式布局中的关键应用
在移动端Web开发中，...总结来说，了解并熟练运用CSS3的viewport和考虑像素密度是实现移动端响应式布局的关键，通过灵活的媒体查询和viewport设置，开发者可以确保网站在不同设备上呈现出最佳的视觉效果和用户体验。
设备像素、css像素、设备独立像素、dpr、ppi之间的区别？
最新发布
m0_60676278的博客
02-01 1047
无缩放情况下，1个CSS像素等于1个设备独立像素设备像素由屏幕生产之后就不发生改变，而设备独立像素是一个虚拟单位会发生改变PC端中，1个设备独立像素 = 1个设备像素 （在100%，未缩放的情况下）在移动端中，标准屏幕（160ppi）下 1个设备独立像素 = 1个设备像素设备像素比（dpr） = 设备像素 / 设备独立像素每英寸像素（ppi），值越大，图像越清晰。
设备（物理）像素和CSS（逻辑）像素
Cao_Mary的博客
09-16 1257
1.什么是设备像素和CSS像素? 1.1、设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点，只有屏幕一经出厂就固定不会改变 1.2、CSS像素又称为逻辑像素，是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素 例如: iPhone3G/iPhone3GS 3.5英寸 逻辑像素320*480 设备像素320*480 iPhone4/4S 3.5英寸 逻辑像素3...
设备像素与CSS像素关系的通俗解说及应用
u012443286的博客
08-22 581
设备像素与CSS像素，作为前端开发者，可能会对这两个概念感到困惑。css已经比较麻烦了，我们为什么还要用这两个概念来加重负担呢？他们是否有足够的应用场景？ 问题引出 让我们先看两个经常发生在我们周围的案例： 当我们把window10中的缩放与布局设置为超过100%时，电脑中所有图标、文字、界面都将比100%时变得更粗，原因是什么？ 另一个案例是： 当我们对网站做移动端适配时，通常会采用750设计稿，即UI设计师的设计稿中页面宽度为750px，我们写css时却要按照375px来写。这就产生一个问题：为
android camera viewport rect,Unity学习笔记：Camera视口、aspect、pixelRect与rect
weixin_42394656的博客
05-27 402
1.Camera视口：用来记录当前摄像机能看到场景中的哪些内容，其大小及位置是可以改变的。而屏幕视口是指当前硬件的屏幕，对于一个固定的硬件(例手机)，它的屏幕视口大小(即分辨率)是固定的。Camera视口的内容不一定可以完全显示在屏幕上，屏幕可能只显示了一部分视口内容，也可能对视口内容进行了放缩。可以简单理解为，Camera视口是一张二维图片，而屏幕是用来显示这张图片的，图片可能被裁减、也可能被压...
响应式布局html像素值计算,【响应式布局】理解设备像素、设备独立像素和css像素...
weixin_35064481的博客
06-03 334
这篇文章是我在我的旧博客上发过的文章，最近又碰到这个问题，整理修改了一下发到这里。像素单位像素单位有设备像素、逻辑像素和CSS像素3种。设备像素(device pixels)、设备分辨率设备像素也叫物理像素。设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了。设备分辨率描述的就是这个显示器的宽和高分别是多少个设备像素。设备像素和设备分辨率交给操作系统来管理，...
css像素、设备像素、设备独立像素、dpr、ppi的概念
蜡笔小开心❤的博客
12-02 140
css像素、设备像素、设备独立像素、dpr、ppi的概念
html物理像素,css中px是像素的意思么？
weixin_39929877的博客
06-03 911
px全称pixel(像素)，是一个虚拟长度单位，表示图片或者图形的最小单位，将像素进行组合，可以在计算机中，显示完整的图像和视频。px像素是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。在CSS中，px是一个相对长度单位，是...
苹果浏览器分辨率css,苹果(Safari)浏览器的图片width设置为100%但实际显示为980px改成的问题方法...
weixin_31597759的博客
08-03 2306
最近在做一个页面时，发现在 iPad 的 Safari 浏览器中背景显示不全，定位到该 div 后发现所指定 css 的宽度为 100% ；到百度搜索后发现，safari 中 viewport 默认宽度为 980px，若事先未指定其初始 viewport 宽度，则会默认按照 980px 处理。可以默认初始化 viewport 宽度或在 css 中设定 min-width，但最简单的方法可以在 he...
搞懂移动端网页中viewport、retina、高清图、dp单位等
laokdidiao的专栏
11-20 2296
一直以来，web移动端都有这么几个问题困扰着我： 单位太多，除了px、rem，其他单位到底啥意思？ 设计师经常会问前端，我到底按照什么尺寸出设计稿？ 高清图怎么做出来的？ 边框1px，为什么在不同手机中粗细完全不同？ 妈蛋，为何移动端总要在meta中width=device-width, initial-scale=1…写这么一句 什么是viewport？ 我相信我的问题也困扰着你，且听我娓娓道来
viewport手机逻辑像素与物理像素原理（附完整手机各版本尺寸）
热门推荐
谢泽的网络日志
12-27 2万+
每英寸有多少个像素，称为ppi(pixel per inch)。我们可以简单算算，iPhone 4是640 x 960像素，对角线就是1154像素，除以3.5英寸，应该是330ppi。而官方给出的数字是326ppi。当像素太密，超过300ppi的时候，人眼 也就不能区分出每个像素。因此iPhone 4的屏幕叫作Retina显示屏。Retina在英文中，是视网膜的意思。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值