移动端分辨率和物理像素

2024-09-02

移动端适配（绝对单位、相对单位、CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport）

在某公司做了一次分享,主题是‘移动端和pc端开发的区别’.可以说,这总结的原版就是在这样的契机下完成的.因为我只是习惯了移动端就应该那么写(设置viewport等),要是让我给大家分条讲下所以然,还真有难度,毕竟自己还不理解,看了几十篇文章,捋了好久,思路也不那么乱了,总结了一下,完成ppt,跟大家分享了一下,完了之后感觉自己进步很大.到如今时隔9个月了,今天拿出来当初的ppt回顾了一番,决定再发此文,以跟大家分享.如若有误,欢迎指正-

分辨率，PPi,DPI,DPR,物理像素，逻辑像素

屏幕尺寸:指的是屏幕对角线的长度分辨率:是指宽度上和高度上最多能显示的物理像素点个数点距:像素与像素之间的距离,点距和屏幕尺寸决定了分辨率大小 PPI:屏幕像素密度,即每英寸(1英寸=2.54厘米)聚集的像素点个数,这里的一英寸还是对角线长度 DPI:每英寸像素点,印刷行业术语.对于电脑屏幕而言和PPI是一个意思设备像素(又称为物理像素): 指设备能控制显示的最小物理单位,意指显示器上一个个的点.从屏幕在工厂生产出的那天起,它上面设备像素点就固定不变了,和屏幕尺寸大小有关,单位 pt. 设

物理像素，ppi，逻辑分辨率和物理分辨率

1 明确几个概念: 物理像素:屏幕物理像素屏幕像素密度ppi:pixels per inch,屏幕上每英寸可以显示的像素点的数量,即屏幕像素密度.顺便一提,ppi就是dpi,只不过有文章里说苹果喜欢用ppi,dpi安卓喜欢用,emmmm,所以还是用ppi吧. ppi的计算:屏幕对角线的屏幕物理像素密度除以屏幕尺寸. 以 iphone6 为例子,屏幕是 1334*750,326ppi,屏幕4.7英寸 Math.sqrt(Math.pow(1334,2)+Math.pow(750,2)) / 4.

CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

1.PX(CSS pixels) 1.1 定义虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. 1.2 注意在CSS规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位.px是一个相对单位,相对的是设备像素(device pixel). 在同样一个设备上,每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第一方面的相对性); 在不同的设备之间,每1个CSS像素所代

pt和px区别 pt是逻辑像素，px是物理像素

pt和px区别 pt是逻辑像素,px是物理像素字体大小的设置单位,常用的有2种:px.pt.这两个有什么区别呢?先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:pt就是point,是印刷行业常用单位,等于1/72英寸. 以iPhone8为基础750做的设计pt单位的,再网页中用px做单位要在pt基础上乘以2了以iPhone8为基础750做的设计pt单位的,再网页中用px做单位要在pt基础上乘以2了逻辑像素和物理像素:逻辑像素(logic point):逻辑像素的单

什么是物理像素、虚拟像素、逻辑像素、设备像素，什么又是 PPI, DPI, DPR 和 DIP

什么是物理像素.虚拟像素.逻辑像素.设备像素,什么又是 PPI, DPI, DPR 和 DIP?有关 viewport 以及苹果安卓设备上的页面呈现为什么效果不一样,又有哪些方法去改变和统一呢?网络上有很多资源对这些知识点进行了介绍,但是查看之后我发现大都比较零散且阅读顺序容易让新人疑惑,在这里我尝试根据几篇文章糅合了一个循序渐进的知识点整理.在正式开始介绍之前,我们先集中看看几个基本概念. 设备像素(device pixel, dp): 又称为物理像素.指设备能控制显示的最小物理单位,意指显示

物理像素[设备像素] & 逻辑像素[CSS像素]；

为什么移动端CSS里面写了1px,实际上看起来比1px粗了解设备物理像素和逻辑像素的同学应该很容易理解,其实这两个px的含义其实是不一样的, UI设计师要求的1px是指设备的物理像素1px,而CSS里记录的像素是逻辑像素,它们之间存在一个比例关系, 可以用javascript中的window.devicePixelRatio来获取,也可以用媒体查询的-webkit-min-device-pixel-ratio来获取.当然,比例多少与设备相关. <meta name="viewport&q

用一篇文章了解ppi,dpr,物理像素，逻辑像素，以及二倍图

这篇文章能让你了解到什么是分辨率.dpr.dip.ppi (dpi相当于ppi,dpi用点表示物理像素密度,ppi是逻辑像素密度) 首先从最简单的ppi开始: 一部手机,有大有小,怎么知道手机的大小用尺子量一量即可,有两条边量哪一条呢?勾股定理告诉我们斜边越大,面积就越大,量斜边没跑了.量的单位可不是cm,而是英寸.1英寸= 2.54cm,这个相信看过<新华字典>或<现代汉语词典>的人都知道,上面附有计量单位表. 嘿嘿,又引出了一个物理像素的概念:物理像素就是分辨率的那两个数字,两

针对iPhone的pt、Android的dp、HTML的css像素与dpr、设计尺寸和物理像素的浅分析

最近被一朋友问到:css中设置一DOM的height:65px,请问显示的高度是否和Android的65dp的元素等高?脑子里瞬间闪现了一堆的概念,如dpr,ppi,dp,pt等,然而想了一阵,浆糊了,所以重新梳理了相关的知识,以备不时之需. 1.ppi ppi指Pixels Per Inch也就是每英寸的像素点,此处的像素点就是物理像素点(也就是最小的显示单元). ppi描述的是像素的密度,满足以下公式此图来源于uxabc(https://medium.com/uxabc/understan

mobile_1 物理像素

1 物理像素需求: border: 1px solid red; 在移动端 dpr 为 2 的屏幕上,实际上是 2 物理像素. 如何实现 1 物理像素? 首先,肯定不能 border: 0.5px solid red; 因为有些 PC 不支持小数 px,或者浏览器会将小数 px 取整,即变成 1px 原理: 让 css 面积减小,initial-scale = 0.5,布局视口变大需要解决的问题是,元素的 width margin 这样的布局 px 变小了? 解决: 使用 rem 适

微信小程序中的rpx与移动设备物理像素

如下图: pt也称逻辑像素点,px物理像素点,1pt等于2px或者3px或更多; iphone6下面0.5pt=1px=1rpx; 使用rpx,小程序在不同设备分辨率下自行转换: PPI=物理像素开根号/屏幕尺寸(对角线) 移动设备中,设计师一般给物理分辨率(物理像素点),而页面渲染(或微信小程序)是逻辑分辨率

CSS中的px与物理像素、逻辑像素、1px边框问题

一直不太清楚CSS中的1px与逻辑像素.物理像素是个什么关系(作为一名前端感觉很惭愧 -_-!),今天终于花时间彻底弄清楚了,其实弄清楚之后就觉得事情很简单,但也只有在弄清楚之后,才会觉得简单(语出<禅与摩托车维修艺术>,哈哈哈哈). 两种像素物理像素:设备屏幕实际拥有的像素点.比如iPhone 6的屏幕在宽度方向有750个像素点,高度方向有1334个像素点,所以iPhone 6 总共有750*1334个物理像素. 逻辑像素:也叫“设备独立像素”(Device Independent Pix

适配方案（五）适配的基础知识之设备像素比 dpr 与 1px 物理像素

设备像素比 dpr 与 1px 物理像素物理像素(physical pixel) 手机屏幕上显示的最小单元,该最小单元具有颜色及亮度的属性可供设置,iphone6.7.8 为:750 * 1334,iphone6+.7+.8+ 为 1242 * 2208 设备独立像素(density-indenpendent pixel) 此为逻辑像素,计算机设备中的一个点,css 中设置的像素指的就是该像素.老早在没有 retina 屏之前,设备独立像素与物理像素是相等的. 设备像素比(device pix

物理像素，逻辑像素，解决1px的问题

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style> ul, li{ l

小程序开发--移动端分辨率与rpx

首先说一个很有意思的问题:一块720p的屏幕和1080p的屏幕那个大? 这个问题很有代表性,如果手机竖着放,720p=720px*1280px,而1080p=1080px*1920px;那么在宽度上,前者是720个像素,后者是1080个像素,后者一定比前者大吗? 答案是否定的,后者不一定比前者大,还可能和前者一样大,甚至比前者小. 这里需要搞清楚一个概念,像素点只有个数的问题,没有大小的问题.那什么才和大小有关呢?是逻辑分辨率(pt),我们来看一张表格: 型号屏幕尺寸(inch) 逻辑分辨率(

前端工程师须知pc电脑端分辨率

采用CSS3 Media Query技术适应Android平板屏幕分辨率和屏幕像素密度

采用HTML5在开发移动应用程序满足各种需求Android分辨率和屏幕的平板设备密度,这是非常麻烦的过程,最终的解决方案是使用css media query,匹配相同的时间分辨率和屏幕像素密度.上进行兼容性測试,终于保证在多数Android平板上都能较好的显示. 一个典型的针对设备的Css Media Query写法例如以下.能够保证页面高度充满屏幕,简单的设置height:100%是不行的. //SAMSUNG N5100, Nexus7 1, @media only screen and (

移动端开发--rem和像素如何使用！

刚开始做移动端的开发的时候,大多时候是在使用像素(PX)来写页面和布局的,但是使用下来,还是有多少不好用! 随之就开始用 rem 来写,rem写的结果是页面放到一些屏幕上,字体过小,如果页面渲染用了rem,但是网站后台编辑器里的字体大小是用像素来做的,这就可能出现一种情况,rem设置的像素要比编辑器里设置的像素要小很多,所以所有的都用 rem 来设置大小,还是有些许问题. 互联网技术,想来想去还是看看阿里是怎么做的?打开淘宝的手机端,他使用的 px+rem混合做的,经过测试确实这种比较好! 下

移动端与H5页面像素的差异与关系

最近工作任务主要是移动端内嵌H5页面,一次与原生进行像素交互下,发现了这个天坑,再次做个记录

vue移动端更改手机物理按键返回问题

又是一天见面的日子,春季盎然~ 已经无法在继续抒情下去了,写作水平骤降!! 今天记录下应用cordva+vue生成的apk 在手机物理返回时遇到的问题: 前提说~~应用vue,我们可以自定义上一路径和下一路径,其实就是在开发webapp时,我们通常会在webapp的头部导航栏自定义返回的上层路径,但是,手机的物理路径并不是像上层路由那样直接返回了,手机物理返回,按照html5 的history的路径进行返回,因此想要手机物理返回也按照我们和头部一样的返回,还需要自己定义: 方法一:

移动端分辨率和物理像素

热门专题