Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

屏幕像素比(window.devicePixelRatio) #65

Open
gdutwyg opened this issue Jul 19, 2019 · 0 comments
Open

屏幕像素比(window.devicePixelRatio) #65

gdutwyg opened this issue Jul 19, 2019 · 0 comments
Labels

Comments

@gdutwyg
Copy link
Owner

gdutwyg commented Jul 19, 2019

设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系

设备像素比 = 物理像素 / 设备独立像素

物理像素(physical pixel)

物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

设备独立像素(density-independent pixel)

设备独立像素也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素。

举个例子:

众所周知,iPhone6的设备宽度和高度为375pt * 667pt,可以理解为设备的独立像素;而其dpr为2,根据上面公式,我们可以很轻松得知其物理像素为750pt * 1334pt。

如下图所示,某元素的CSS样式:

width: 2px;
height: 2px;

在不同的屏幕上,CSS像素所呈现的物理尺寸是一致的,而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素,而在Retina屏幕下,1个CSS像素对应的却是4个物理像素。
image

补充:

flexible的原理

flexible 主要是通过document.documentElement.getBoundingClientRect().width(除以10)来修改html标签的fontSize; 通过window.devicePixelRatio(1除以dpr)来修改meta的scale;

px如何换算成rem

假设设计稿为750px, 某个控件量出宽度200px;通过以下的px2rem换算成rem;

// 如果设计稿是640px,$base-font-size也要改成64px
@function px2rem($px, $base-font-size: 75px) {
   ...
  @return ($px / $base-font-size) * 1rem;
}
// 200px
px2rem(200px) // return 2.666rem

参考

使用Flexible实现手淘H5页面的终端适配

@gdutwyg gdutwyg added the css label Jul 25, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant