微信长按下载图片清晰度引发的研究

239 阅读1分钟

知识准备

1、对于设备来说,有两个设备像素:物理像素独立像素(逻辑像素)

a.物理像素也就是设备屏幕分辨率,如iphone6的屏幕分辩率是750*1334;
b.独立像素也就是web编程中的逻辑像素,也就是css像素,几px;
  如iphone6的css像素就是320px*568px

2、设备像素比DPR

a.由上我们知道同个设备的物理像素与逻辑像素之间并非都是相等关系,
  而他们之间的比例关系(物理像素/逻辑像素)便是设备像素比DPR(Device Pixel Ratio);
b.对于常规屏幕来说,一个逻辑像素就等于一个物理像素,但是在Retina屏幕设备中,
  一个逻辑像素可能等于多个物理像素。比如iphone6的DPR就是750/375=2;即通常所说的二倍屏;
  也就是我们通常以iphone6尺寸做web移动端设计稿选择750px宽度的原因;

3、rem自适应

a.所谓rem,其实表示的就是1rem == 根字体大小(**px);
b.而rem做自适应呢,通常就是根据 设备宽度/设计图宽度 的比例来动态的设置根字体大小,
  结果就是设备越宽的屏幕,比例越大,根字体越大,所以1个rem也就越大,从而实现弹性自适应。