CSS > 高清缩放原理分析

zhjx922 发布于2019-08-30 12:56 / 2034人阅读

摘要：最近在研究屏的适配问题，在具体方案讨论之前，陆续做了一些理解笔记，现归纳如下。

最近在研究 Retina 屏的适配问题，在具体方案讨论之前，陆续做了一些理解笔记，现归纳如下。具体方案的讨论将另作文章。

中的 viewport 是布局视口

initial-scale 等的缩放是基于理想视口的

理想视口由设备各自提供，理想视口的宽度也是设备的独立像素

所谓“独立”是说这个设备独立像素和像素密度无关

Retina屏增加了设备像素（物理像素），所以物理像素是有密度变化的

dpr = 物理像素/设备独立像素 = 设备像素个数/设备理想视口宽度

dpr 在 JavaScript 中可以通过 window.devicePixelRatio 获取，在 CSS Media Query 中的名称是 device-pixel-ratio

CSS像素和物理像素有区别，当1个CSS像素跨越更多物理像素时，就模糊了，反之则清晰，CSS像素被用在布局视口上

缩放可以调整CSS像素和物理像素之间的比例关系。高清屏的缩放方案就是：如将布局视口扩大为理想视口的2倍，即理想视口缩放比例为1/2，那么CSS像素将比以前跨越更少的物理像素，从而保证清晰度

布局视口/理想视口 = CSS像素/设备独立像素 = 1/缩放比例

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

页面清晰要求 —— CSS像素/物理像素 = 1

故 —— 缩放比例 = 1/dpr

从以下的关系比中来认知：

布局视口(CSS像素) : 设备独立像素(理想视口) : 物理像素

设备独立像素可以被看做一个中间件：

当 dpr=1 时，设 initial-scale=1.0，布局视口等于设备独立像素，设备独立像素等于物理像素，故布局视口等于物理像素，1CSS像素跨1物理像素

当 dpr=2 时，设 initial-scale=1.0，布局视口等于设备独立像素，设备独立像素是物理像素的一半，故布局视口是物理像素的一半，1CSS像素跨4物理像素

当 dpr=2 时，设 initial-scale=0.5，布局视口是设备独立像素的两倍，设备独立像素是物理像素的一半，故布局视口等于设备像素，1CSS像素跨1物理像素

再来研究高清屏，以下均设：设备独立像素是 375px，dpr=2，物理像素则是 750px，元素DIV div{width: 375px}：

initial-scale=1.0 时，1CSS像素跨越4物理像素，故 DIV 是满屏的

initial-scale=0.5 时，1CSS像素跨越1物理像素，故 DIV 只占屏幕的一半，要想同样保持全屏，就需要把 DIV 改为 div{width: 750px}

所以，对于图来说，第一种情况下普通图片就会拉伸，从而模糊；第二种情况，就是使用高清图

为不同屏幕的元素设置不同的像素单位过于麻烦，开发者就需要考虑是否有跨屏幕的尺寸单位解决方案

rem：当普通屏时，设 :root{font-size: 10px}，则 37.5rem 是 375px；高清屏时，设 :root{font-size: 20px}，则 37.5rem 是 750px，因此，我们在 DIV 元素上只需要设置一个 37.5rem，在不同屏幕下更改根元素的字体大小，就可以兼容所有屏幕了

vw 和 wh：相对于布局视口大小计算尺寸，普通屏布局视口是 375px，高清屏是 750px，无论怎么变，vw/vh 单位的最后结果都会相应变化

GPU云服务器云服务器 js跨域原理分析语音降噪图形分析原理webrtc java运算符&gt&gt&gt python &gt&gt

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115182.html

一次搞清楚移动端适配这几个坑爹的单位慨念

摘要：真的是给我们新手学习移动端适配造成不少困惑英语真的很重要呀。细节高清屏上的处理其实并不是所有做移动端适配的人都一定会遇到这个问题。一次搞清楚移动端这几个坑爹的单位慨念目录: 一、让坑爹的单位,不再坑爹二、需要准备什么样的设计稿三、rem方案的原理和细节高清屏上,位图的处理高清屏上,关于border: 1px的处理移动端屏幕的自动适配的处理移动端屏幕上字体大小的处理...

objc94 2019-08-30 14:05 评论0 收藏0
一次搞清楚移动端适配这几个坑爹的单位慨念

摘要：真的是给我们新手学习移动端适配造成不少困惑英语真的很重要呀。细节高清屏上的处理其实并不是所有做移动端适配的人都一定会遇到这个问题。一次搞清楚移动端这几个坑爹的单位慨念目录: 一、让坑爹的单位,不再坑爹二、需要准备什么样的设计稿三、rem方案的原理和细节高清屏上,位图的处理高清屏上,关于border: 1px的处理移动端屏幕的自动适配的处理移动端屏幕上字体大小的处理...

elva 2019-08-22 15:05 评论0 收藏0
对移动端兼容适配的分析

摘要：一思考在移动端越来越重要的背景下，每位开发者对移动适配都有自己的想法。这个和移动端的设计体验方式是比较像的。对移动端的特殊性进行适配，如问题，默认样式等。一、思考在移动端越来越重要的背景下，每位web开发者对移动适配都有自己的想法。是移动优先，还是PC优先，还是两者兼得？在实际开发中这个问题是和项目产品定位有关的，也涉及到UI的设计，不是开发者能决定。但不管产品如何定位，作为开发...

huashiou 2019-08-02 15:22 评论0 收藏0