一文讲清前端应该理解的分辨率/逻辑分辨率/物理分辨率

设备像素（物理像素）
顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，**它上面的物理像素点就固定不变了，单位pt。
分辨率
通常我们的电脑分辨率为1920*1080等，从左到右排1920个像素点，从上到下可以排1080个像素点，也就是说显示屏上会显示多少个像素点，像素点越多，屏幕自然也就越清晰。
又称逻辑像素（设备独立像素）。
首先要知道，逻辑像素可以通过软件改变的想怎么改就怎么改。

缩放至150%后发生了什么变化？

相当于将原来的一个像素放大至1.5倍，因屏幕尺寸固定，所以可以容纳的像素点数变少了。则分辨率为：（1920/150%）*（1080/150%）,

以后我们前端开发人员要专业一些：一块屏有两个分辨率。

总结

物理分辨率是出厂时设置的，是不可变的；
逻辑分辨率是有软件（驱动）决定的。

问：我们前端开发时是基于逻辑像素进行开发 or 物理像素?

答：逻辑像素。

看个例子就明白了;
首先看一下我电脑全屏时淘宝首页的分辨率（PC端）：

再看看我电脑的物理像素：

明显是和逻辑像素不相等的。

下面我们看看移动端，也是分物理分辨率和逻辑分辨率：

移动端同样是针对逻辑分辨率进行开发的。

视口

目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页。
不同手机的逻辑分辨率都不同，但网页宽度为100%；

我们如何实现网页的宽度和逻辑分辨率尺寸相同？

使用meta标签，vscode可自动生成。

其中：

viewport：视口
width=device-width：视口宽度 = 设备宽度（逻辑分辨率）
initial-scale=1.0：缩放1倍（不缩放)

注意：写移动端时一定要加上视口标签！！！目的是为了让网页宽度和设备宽度（逻辑分辨率）相同。

问：PC端有无视口概念？

有的，PC端网页尺寸和屏幕的逻辑分辨率是默认就是相等的，无需处理，但移动端默认不相等，需要加上视口标签。

一文讲清前端应该理解的分辨率/逻辑分辨率/物理分辨率相关推荐

一文讲清-NFT市场新秀SudoSwap的AMM机制-创新挑战与局限
NFT交易市场的近期颓势频现,整个市场的流动性大幅降低,而此时8月异军突起的SudoSwap则凭借一超多强的增长数据,让基于AMM机制的交易市场映入大众视野. 基于链上数据分析截至8.20日,已有上千 ...
P，NP，PSPACE都是什么，一文讲清计算复杂性分类
P,NP,PSPACE都是什么鬼一文讲清计算复杂性分类 7种计算复杂类的关系导语对于计算机来说,哪些问题是容易计算的,哪些是几乎不可能的?这些是计算复杂性领域的核心问题.本文是对这些问题的鸟瞰.( ...
一文讲清土地财政,地方债,转移支付,房产税和中特估
今天主要从地方政府的债务出发,谈一谈央地博弈,土地财政,转移支付以及房产税等内容. 本文干货较多,刚开始读起来会比较晦涩,但是干货满满,看懂了一定会有收获具体: 一文讲清土地财政,地方债 ...
一文讲清：对象存储、文件存储、块存储。绝对好文
从应用角度看块存储.文件存储.对象存储产品和市场需求有各种相互影响的关系,但不管是哪一种,最终呈现都是产品和应用需求需要对应匹配.应用需求越多样化,市场也就划分得更加细,产品种类也就更加丰富.在存储 ...
打工人一文讲清软件性能优化
性能优化是指在不影响正确性的前提下,使程序运行得更快,它是一个非常广泛的话题. 优化有时候是为了降低成本,但有时候,性能能决定一个产品的成败,比如游戏服务器的团战玩法需要单服达到一定的同时在线人数才能 ...
一文讲清所有字符编码(历史故事背景)
本次字符编码中涉及到了几乎所有常用的编码方式,囊括ASCII,GB2312,GBK,Unicode,UTF(utf-8,utf-16,utf-32). 什么是字符编码,为什么要有字符编码? 因为计算机 ...
从原理到方法，一文讲清如何应对C语言内存泄露！
可能不少开发者都遇到过内存泄漏导致的网上问题,具体表现为单板在现网运行数月以后,因为内存耗尽而导致单板复位现象.一方面,内存泄漏问题属于比较浅显的错误,此类问题遗漏到现网,影响不好:另一方面,由于内存 ...
一文讲清数据治理、数据管理、数据资产管理区别，数据专家必看
转载/谈数据数据治理.数据管理.数据资产管理,有什么不同?这是一个我被问的最多的问题. 如果要用一张图来描述它们三者之间的关系,你跟赞成以下两幅图的哪个? 图1:数据治理包含数据管理,数据治理提出了 ...
一文讲清，MySQL中的二级索引
主键索引是InnoDB存储引擎默认给我们创建的一套索引结构,我们表里的数据也是直接放在主键索引里,作为叶子节点的数据页. 但我们在开发的过程中,往往会根据业务需要在不同的字段上建立索引,这些索引就是二 ...
一文讲清，MySQL如何解决多事务并发问题
MySQL默认事务隔离级别是repeatable-read(RR),脏读.不可重复读.幻读,都不会发生.它是怎么做到的呢? 这就是由经典的MVCC多版本并发控制机制做到的,MVCC的实现,又是基于un ...

一文讲清前端应该理解的分辨率/逻辑分辨率/物理分辨率

总结

问：我们前端开发时是基于逻辑像素进行开发 or 物理像素?

视口

我们如何实现网页的宽度和逻辑分辨率尺寸相同？

注意：写移动端时一定要加上视口标签！！！目的是为了让网页宽度和设备宽度（逻辑分辨率）相同。

一文讲清前端应该理解的分辨率/逻辑分辨率/物理分辨率相关推荐

最新文章

热门文章

一文讲清前端应该理解的分辨率/逻辑分辨率/物理分辨率

总结

问：我们前端开发时是基于逻辑像素进行开发 or 物理像素?

视口

我们如何实现网页的宽度和逻辑分辨率尺寸相同？

注意： 写移动端时一定要加上视口标签！！！目的是为了让网页宽度和设备宽度（逻辑分辨率）相同。

一文讲清前端应该理解的分辨率/逻辑分辨率/物理分辨率相关推荐

最新文章

热门文章

注意：写移动端时一定要加上视口标签！！！目的是为了让网页宽度和设备宽度（逻辑分辨率）相同。