前端 - DPR

最新推荐文章于 2024-05-11 14:36:13 发布
最新推荐文章于 2024-05-11 14:36:13 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_33184880/article/details/102491669
版权
本文探讨了前端开发中的设备物理像素、DPR（Device Pixel Ratio）的概念，解释了DPR如何影响前端使用2、3倍图的原因，并介绍了设备逻辑像素的计算公式以及设备尺寸和PPI（Pixels Per Inch）对显示质量的影响。
摘要由CSDN通过智能技术生成

参考博客：（全解析）屏幕尺寸，分辨率，像素，PPI之间到底什么关系？

1.设备物理像素：指的是手机屏幕上横向（或纵向）上共有多少个像素点，以iphone8为例，iphone8的分辨率为1334x750像素，1334为纵向的设备物理像素，750为横向的设备物理像素。设备的物理像素是设备决定的，不可改变

2.DPR（Device Pixel Ratio）：设备像素比，指的是设备一逻辑像素点内能显示多少个物理像素，现在市面上的手机绝大部分DPR等于2或3，iphone6/7/8的DPR都为2（1个逻辑像素需要2个物理像素显示），iphone6/7/8 Plus的DPR都为3，这就是前端开发需要使用到2、3倍图的原因。设备的DPR是设备决定的，不可改变

// js获取设备DPR
window.devicePixelRatio

3.设备逻辑像素：在移

最低0.47元/天 解锁文章
jnChen10
关注
专栏目录
设备的dpr_设计师的前端知识：搞清楚像素、设备像素、设备独立像素、dpr、ppi、逻辑分辨率、物理分辨率...
weixin_35656285的博客
12-23 1037
最近工作中正在研究跨端设计系统，其中部分内容涉及到上述概念。为了搞清楚这几个术语概念自己也找了很多资料，也咨询了一些前端同学。同时也很诧异地发现有些前端同学对于以上几个概念也不完全十分清楚，所以自己把一些找到的资料汇总起来结合自己的理解尝试着解释一下这几个概念，如有不对之处，还请多多指正。一.几个像素单位的区别到底什么是像素：px实际是pixel(像素)的缩写，根据 维基百科的解释，它是图像显示的...
前端图片适配不同屏幕方案
zhangqiang
12-28 1747
图片适配不同屏幕方案和JavaScript 方案实现图片的懒加载方案
2024年Web前端最全牛笔了！字节跳动大佬整理：CSS 核心知识（万字长文，值得收藏！，前端页面三个层面
最新发布
2401_84619606的博客
05-11 850
之前我们通常是在预处理器里才可以使用变量，而现在 CSS 里也支持了变量的用法。通过自定义属性就可以在想要使用的地方引用它。自定义属性也和普通属性一样具有级联性，申明在 :root 下的时候，在全文档范围内可用，而如果是在某个元素下申明自定义属性，则只能在它及它的子元素下才可以使用。自定义属性必须通过--x的格式申明，比如：–theme-color: red;使用自定义属性的时候，需要用 var 函数。比如：定义自定义属性:root {使用变量h1 {复制代码。
作为前端需要知道的逻辑像素、设备像素、dpr、dpi...
xdididi的博客
03-21 741
作为前端开发者，我们经常需要面对各种不同的屏幕，如 PC、iPad、移动端等。这些屏幕的尺寸和分辨率各不相同，因此我们在 CSS 中设置的相同像素单位（px）在不同屏幕上的显示效果也会有所差异。如果你想深入了解其中的原因，那么就跟着本文一起探究一下像素的奥秘吧。首先我们需要知道什么是?设备像素，也称为物理像素，是指屏幕上的实际像素。我们都知道，屏幕是由许多小方块组成的，每个小方块只能显示一种颜色，而这 1 个小方块就是 1 个设备像素。每个设备的设备像素大小都不同，而且它们在出厂时就已经确定了每个设备像素的
前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配
油墨香^-^的博客
09-05 1150
首先先聊聊响应式设计，这个与移动端开发有着密切的联系。响应式设计即是 RWD，Responsive Web Design。这里百度或者谷歌一下会有各种各样的答案。这里一段摘自知乎上我觉得很棒的一个答案：什么是响应式布局设计？（地址：https://www.zhihu.com/question/20976405）根据维基百科及其参考文献，理论上，响应式界面能够适应不同的设备。
微信小程序DPR的理解
Strange_程序员的的博客
10-29 4965
DPR指的是设备的像数比，在制作的微信小程序的时候常用，也就相当于web前端的自适应，根据设备的像素（也就是物理像素）大小进行调节。 物理像素:显示器上最小的物理显示单元（像素颗粒），在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。 例如：手机大小固定，物理像素越高，画面越清晰细腻。 逻辑像素:可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素，也可称为设备独...
15-移动端布局基础——DPI、PPI、物理像素、DPR、viewportcss像素、DPR
CapejasmineY的博客
08-06 1049
移动端布局基础——DPI、PPI、物理像素、css像素、DPR、viewport、DPR
前端大厂最新面试题-dp_px_dpr_ppi.docx
06-06
在前端开发领域，理解和掌握设备像素、CSS像素、设备独立像素、DPR（设备像素比）和PPI（每英寸像素）的关系至关重要，特别是在处理移动端布局时。这些概念的混淆可能导致页面在不同设备上的显示效果差异巨大。让...
[前端]Web前端-移动端开发知识点及常用适配方案
deathz15的博客
12-01 2100
文章目录一、前端开发常用单位1.像素(Pixel)2.百分比3.em4.rem5.vw(Viewport Width)和vh(Viewport Height)二、视口三、设备像素和CSS像素1.什么是设备像素和CSS像素?2.如何解决设备像素和CSS像素不一样的问题?3.获取设备像素比DPR(Device Pixel Ratio)四、常用移动端适配方案1.通过media媒体查询2.通过media媒体查询+rem3.通过JS+rem4移动端开发适配方案之终极方案相关文献 一、前端开发常用单位 1.像素(Pix
移动端适配dpr
少油少盐不要辣
02-09 3366
这是将layout viewport（布局视口）宽度设置为设备屏幕宽度，这句就得到了理想视口。
前端渲染模式CSR，SSR，SSG，ISR，DPR
lm278858445的专栏
07-12 1345
针对CSR，SSR，ISR，SSG，DPR的介绍和对比
移动web开发之像素和DPR详解
热门推荐
开心大表哥
02-09 4万+
前话： 　　像素在web开发中几乎天天用到，但到底什么是像素，移动端和桌面端的像素有区别吗，缩放对像素有影响吗，视网膜屏幕和像素有什么关系？关于这些问题，可能就不清楚了。本文将介绍关于像素的相关知识 　　 什么是像素： 　　像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”...
web开发之像素和DPR详解
刘建亚的专栏
03-25 1357
像素和DPR 我们在web开发的过程中，经常会提到「像素」这个词，那么，像素到底是什么？移动端的像素与桌面端是否有区别？同样大小的手机屏幕，为什么有的像素高，有的像素低？下面让我们通过资料阅读，一起找到这些问题的答案吧。 像素的定义 「像素」是图像显示的基本单位，译自英文「pixel」，一个像素就是屏幕上能够显示一种特定颜色的最小区域。如下图右侧图片中，每一小格子代表一像素： 当...
不同设备屏幕尺寸和DPR适配
letterTiger的博客
08-09 8481
为什么需要适配 很久以前的手机的DPR都是1，这时候不需要做DPR适配，直接按照设计稿将页面画出来即可。但是自从技术的发展屏幕的升级出现了DPR为2为3甚至更高并且屏幕的尺寸也变得很多样化，这个时候如果不做适配会出一些问题，如图片模糊，不能实现真正的1px边框，同一个布局在不同尺寸下的表现不一致，如在375屏幕下是100px在414的屏幕下还是100px，这就有问题了，应该等比放大才对。 所以...
从dpr谈起到移动端适配问题(一)
simonyuan100的博客
09-30 2610
一、dpr先看个公式： devicePixelRatio （设备像素比 简写dpr）=physical pixels/ logical pixels(也就是device-independent pixel) 物理像素点：硬件上最小的显示点位，硬件不同最小点位就可能存在差异 设备独立像素点：系统设定的最小的显示点位，不可能小于物理像素点，这个单位的意义在于css样式中px 所对应的值，系统设
前端面试题——HTML
qq_36081714的博客
02-28 220
HTML 面试题
2021.10.13 五种移动端前端适配方案【移动端】
一只白猫罢了
10-13 5060
四种移动端前端适配方案： 通过媒体查询的方式即CSS3的meida queries 以天猫首页为代表的 flex 弹性布局 以淘宝首页为代表的 rem+viewport缩放 rem 方式 1. media queries 实现原理 meida queries 主要是通过查询设备的宽度 来执行不同的 css 代码。 @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ /*你的css代码*/ } 优缺点 2. F
前端新手——适配不同手机端页面的方案，动态查询dpr设置根元素font-size
W_l_l的博客
07-22 1万+
动态计算dpr 和根元素的fontsize，适配不同分辨率不同设备的移动前端开发
D-Link DPR-1020 USB打印服务器手册
"DPR-1020说明书.pdf" 是一份关于D-Link DPR-1020 USB 2.0 多功能打印服务器的用户手册。这份文档详细介绍了该设备的功能、设置方法以及如何使用它来提升网络打印效率。 D-Link DPR-1020是一款在2010年发行的USB...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值