前端 - DPR

最新推荐文章于 2023-02-28 13:36:43 发布
最新推荐文章于 2023-02-28 13:36:43 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_33184880/article/details/102491669
版权

参考博客：（全解析）屏幕尺寸，分辨率，像素，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是设备决定的，不

最低0.47元/天 解锁文章
jnChen10
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
设备的dpr_设计师的前端知识：搞清楚像素、设备像素、设备独立像素、dpr、ppi、逻辑分辨率、物理分辨率...
weixin_35656285的博客
12-23 1000
最近工作中正在研究跨端设计系统，其中部分内容涉及到上述概念。为了搞清楚这几个术语概念自己也找了很多资料，也咨询了一些前端同学。同时也很诧异地发现有些前端同学对于以上几个概念也不完全十分清楚，所以自己把一些找到的资料汇总起来结合自己的理解尝试着解释一下这几个概念，如有不对之处，还请多多指正。一.几个像素单位的区别到底什么是像素：px实际是pixel(像素)的缩写，根据 维基百科的解释，它是图像显示的...
作为前端需要知道的逻辑像素、设备像素、dpr、dpi...
最新发布
xdididi的博客
03-21 502
作为前端开发者，我们经常需要面对各种不同的屏幕，如 PC、iPad、移动端等。这些屏幕的尺寸和分辨率各不相同，因此我们在 CSS 中设置的相同像素单位（px）在不同屏幕上的显示效果也会有所差异。如果你想深入了解其中的原因，那么就跟着本文一起探究一下像素的奥秘吧。首先我们需要知道什么是?设备像素，也称为物理像素，是指屏幕上的实际像素。我们都知道，屏幕是由许多小方块组成的，每个小方块只能显示一种颜色，而这 1 个小方块就是 1 个设备像素。每个设备的设备像素大小都不同，而且它们在出厂时就已经确定了每个设备像素的
前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配
油墨香^-^的博客
09-05 1108
首先先聊聊响应式设计，这个与移动端开发有着密切的联系。响应式设计即是 RWD，Responsive Web Design。这里百度或者谷歌一下会有各种各样的答案。这里一段摘自知乎上我觉得很棒的一个答案：什么是响应式布局设计？（地址：https://www.zhihu.com/question/20976405）根据维基百科及其参考文献，理论上，响应式界面能够适应不同的设备。
微信小程序DPR的理解
Strange_程序员的的博客
10-29 4826
DPR指的是设备的像数比，在制作的微信小程序的时候常用，也就相当于web前端的自适应，根据设备的像素（也就是物理像素）大小进行调节。 物理像素:显示器上最小的物理显示单元（像素颗粒），在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。 例如：手机大小固定，物理像素越高，画面越清晰细腻。 逻辑像素:可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素，也可称为设备独...
15-移动端布局基础——DPI、PPI、物理像素、DPR、viewportcss像素、DPR
CapejasmineY的博客
08-06 1011
移动端布局基础——DPI、PPI、物理像素、css像素、DPR、viewport、DPR
前端项目-lazysizes.zip
09-02
响应式图像可以通过`data-srcset`属性定义不同分辨率的源，库会根据设备的视口宽度和DPR（设备像素比）选择合适的图片。 - **iframe**：对于嵌入的 iframe，如视频或地图，lazysizes 会在iframe进入视口时加载，...
前端大厂最新面试题-前端综合面试.docx
06-06
前端大厂最新面试题-前端综合面试 本资源主要讲解了移动端1px边框问题的解决方案，涉及到移动端开发中的一些关键技术点，包括媒体查询、边框图片、CSS3 box-shadow、viewport结合rem、:before、:after与transform等...
前端大厂最新面试题-dp_px_dpr_ppi.docx
06-06
在前端开发领域，理解和掌握设备像素、CSS像素、设备独立像素、DPR（设备像素比）和PPI（每英寸像素）的关系至关重要，特别是在处理移动端布局时。这些概念的混淆可能导致页面在不同设备上的显示效果差异巨大。让...
前端实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）
04-21
const dpr = window.devicePixelRatio || 1; const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx....
前端JS库,适合所有手机屏幕尺寸 据说以前的淘宝是用的它.zip
01-10
在实现移动适配的过程中，Flexible库采用了“设备像素比”（Device Pixel Ratio，简称dpr）的概念，来调整页面元素的大小。通过动态设置html元素的font-size，然后根据屏幕宽度与设计稿的宽度比例，计算出每个元素的...
移动web开发之像素和DPR详解
热门推荐
开心大表哥
02-09 4万+
前话： 　　像素在web开发中几乎天天用到，但到底什么是像素，移动端和桌面端的像素有区别吗，缩放对像素有影响吗，视网膜屏幕和像素有什么关系？关于这些问题，可能就不清楚了。本文将介绍关于像素的相关知识 　　 什么是像素： 　　像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”...
web开发之像素和DPR详解
刘建亚的专栏
03-25 1288
像素和DPR 我们在web开发的过程中，经常会提到「像素」这个词，那么，像素到底是什么？移动端的像素与桌面端是否有区别？同样大小的手机屏幕，为什么有的像素高，有的像素低？下面让我们通过资料阅读，一起找到这些问题的答案吧。 像素的定义 「像素」是图像显示的基本单位，译自英文「pixel」，一个像素就是屏幕上能够显示一种特定颜色的最小区域。如下图右侧图片中，每一小格子代表一像素： 当...
不同设备屏幕尺寸和DPR适配
letterTiger的博客
08-09 8174
为什么需要适配 很久以前的手机的DPR都是1，这时候不需要做DPR适配，直接按照设计稿将页面画出来即可。但是自从技术的发展屏幕的升级出现了DPR为2为3甚至更高并且屏幕的尺寸也变得很多样化，这个时候如果不做适配会出一些问题，如图片模糊，不能实现真正的1px边框，同一个布局在不同尺寸下的表现不一致，如在375屏幕下是100px在414的屏幕下还是100px，这就有问题了，应该等比放大才对。 所以...
从dpr谈起到移动端适配问题(一)
simonyuan100的博客
09-30 2591
一、dpr先看个公式： devicePixelRatio （设备像素比 简写dpr）=physical pixels/ logical pixels(也就是device-independent pixel) 物理像素点：硬件上最小的显示点位，硬件不同最小点位就可能存在差异 设备独立像素点：系统设定的最小的显示点位，不可能小于物理像素点，这个单位的意义在于css样式中px 所对应的值，系统设
前端面试题——HTML
qq_36081714的博客
02-28 173
HTML 面试题
2021.10.13 五种移动端前端适配方案【移动端】
一只白猫罢了
10-13 4974
四种移动端前端适配方案： 通过媒体查询的方式即CSS3的meida queries 以天猫首页为代表的 flex 弹性布局 以淘宝首页为代表的 rem+viewport缩放 rem 方式 1. media queries 实现原理 meida queries 主要是通过查询设备的宽度 来执行不同的 css 代码。 @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ /*你的css代码*/ } 优缺点 2. F
前端适配问题
weixin_43416349的博客
11-08 2695
前端适配有两种适配方法 ： 响应式 假如一个页面分三部分，页面缩小时，内容等比例缩小 自适应式 假如一个页面分三部分，页面缩小时，只显示两部分，再缩小就显示一部 什么是 dpr ： DPR（Device Pixel Ratio） 设备像素比 DPR = 物理像素 / 设备独立像素 物理像素 = 手机的分辨率 设备独立像素 = 设备屏幕的大小（开发者工具调试里） = css的px 总之： 一个手机屏幕有很多个显示点（像素点），如果Dpr = 2 ，就是 1 PX 由 2个像素点显...
移动端适配dpr
少油少盐不要辣
02-09 3273
这是将layout viewport（布局视口）宽度设置为设备屏幕宽度，这句就得到了理想视口。
前端新手——适配不同手机端页面的方案，动态查询dpr设置根元素font-size
W_l_l的博客
07-22 1万+
动态计算dpr 和根元素的fontsize，适配不同分辨率不同设备的移动前端开发
if (metaEl) { console.warn('将根据已有的meta标签来设置缩放比例'); var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); if (match) { scale = parseFloat(match[1]); dpr = parseInt(1 / scale); } } else if (flexibleEl) { var content = flexibleEl.getAttribute('content'); if (content) { var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); if (initialDpr) { dpr = parseFloat(initialDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } if (maximumDpr) { dpr = parseFloat(maximumDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } } }
06-12
这是一段 JavaScript 代码，主要是用于设置移动端页面的缩放比例。该代码首先检查页面中是否存在 meta 标签，如果存在，则解析该标签的 content 属性中的 initial-scale 值，从而设置缩放比例和 dpr 值。如果页面中没有 meta 标签，那么就检查是否存在 name 为 viewport 的 flexible 标签，该标签的 content 属性中设置了 initial-dpr 和 maximum-dpr 值，从而设置 dpr 和缩放比例 scale。整个代码的作用是为了让移动端页面在不同的设备上显示效果更加一致和舒适。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值