移动web前端开发二倍图(多倍图)的原理以及使用方式

王亚兵4个月前 (11-06)web前端基础78

前面给大家分享我们移动web前端开发的视口的基础知识,而且如何通过市口标签。实现web开发中页面的显示问题。今天我们来了解一下移动web前端开发中的二倍图技术,想要了解什么是二倍图或者是多倍图,知道为什么要使用二倍图以及多倍图。以及如何使用二倍图。可以继续往下看。

首先先了解为什么在移动前端开发中,要使用多倍图技术。在此之前我们先了解一下什么是物理像素和物理像素比。我们所属的物理像素是指页面显示的最小单位元素。是我们的设备中真实存在的。在pc设备中,我们所说的1个px就对应了一个物理像素。但是,在移动端开发中,一个px对应的不一定对应一个物理像素了。这就牵扯到另一感念——Retina视网膜技术

视网膜屏幕分辨率超过人眼识别极限的高分辨率屏幕,也激素是将高分辨率压缩到一个比较小的屏幕上,这也就是买手机时看的屏幕分辨率很大,但是屏幕并不是很大的原因。所以我们css中的像素px与我们设备分辨率的像素是有一定的差异的。比如下图中是谷歌中移动端的视口,我擦用的是苹果6/7/8的视口。他的物理像素是414*736.他的一个物理像素中有两个css像素。

移动前端开发二倍图的原理使用方法

所以如果我们讲pc端中css像素是300像素的长度盒子,在苹果8的分辨率按理说一行可以显示750个像素,但是我们发现在视图中,这个红色的盒子已经快要铺满整个屏幕的宽度。如果是矢量元素,放大之后看不出什么问题,如果是我们的一个位图。如果移动端显示效果放大后很有可能出现马赛克的情况,这就是需要我们使用二倍图甚至多倍图。

移动前端开发二倍图的原理使用方法

这个如何使用呢?很简单。如果在css中写一个50px的的图。其实在移动端显示的肯定是移动端的100px。这样的图片就会变得模糊。很有可能出现马赛克或者锯齿。所以我们需要做一个100px的图,在css中把它从新定义成50px。在移动端中展现出的就是100px的效果。

希望通过今天的分享,大家能了解移动端web开发中二倍图的原来以及使用方法

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。