We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
设备像素比简称为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个物理像素。
补充:
flexible的原理
flexible 主要是通过document.documentElement.getBoundingClientRect().width(除以10)来修改html标签的fontSize; 通过window.devicePixelRatio(1除以dpr)来修改meta的scale;
document.documentElement.getBoundingClientRect().width
window.devicePixelRatio
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页面的终端适配
The text was updated successfully, but these errors were encountered:
No branches or pull requests
设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系
物理像素(physical pixel)
物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。
设备独立像素(density-independent pixel)
设备独立像素也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素。
举个例子:
众所周知,iPhone6的设备宽度和高度为375pt * 667pt,可以理解为设备的独立像素;而其dpr为2,根据上面公式,我们可以很轻松得知其物理像素为750pt * 1334pt。
如下图所示,某元素的CSS样式:
在不同的屏幕上,CSS像素所呈现的物理尺寸是一致的,而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素,而在Retina屏幕下,1个CSS像素对应的却是4个物理像素。
补充:
flexible的原理
flexible 主要是通过
document.documentElement.getBoundingClientRect().width
(除以10)来修改html标签的fontSize; 通过window.devicePixelRatio
(1除以dpr)来修改meta的scale;px如何换算成rem
假设设计稿为750px, 某个控件量出宽度200px;通过以下的px2rem换算成rem;
参考
使用Flexible实现手淘H5页面的终端适配
The text was updated successfully, but these errors were encountered: