设计稿还原相关知识
2021-01-16 19:20:16 421 举报AI智能生成
登录查看完整内容
设计稿还原
作者其他创作
大纲/内容
设计稿还原相关知识
分辨率
分类
设备分辨率
图像分辨率
单位(屏幕像素密度)
PPI: 描述图像分辨率
DPI: 描述设备分辨率
PPI/DPI的计算方式
PPI/DPI要点
影响PPI/DPI的因素
垂直方向的分辨率
水平方向的分辨率
屏幕尺寸
如何影响PPI/DPI
非retina屏
分辨率相同，更高的PPI/DPI表现为物理尺寸更小
物理尺寸相同
较低的PPI/DPI表现为较低的分辨率
较低的分辨率表现为DPI更小
案例
手机的分辨率就很高，因为手机屏幕很小，所以就需要更高的分辨率才能让图像显示得更清晰
特例: retina屏-如苹果操作系统的屏幕
物理尺寸不变，PPI增大了，分辨率也增大了(如:从iphone3到iphone4)
为什么
苹果操作系统的内部机制
应用场景
在图像处理中选择合适的设备分辨率值和图像分辨率值，既能保证图像质量，又能减少文件大小
用在移动端设计稿中
分辨率决定了设计稿应该出几倍图
当用于描述显示器设备时PPI/DPI是同一个概念PPI/DPI值越高，则屏幕越细腻，图像显示越清晰
像素
逻辑像素
别名
设备独立像素(device-independent pixel)
Web像素
CSS像素-px(CSS pixels)
单位
px
如何获取浏览器的逻辑像素
screen.width
screen.height
1px 等于多少物理像素 的影响因素
在非 retina PC屏幕上， 1px = 1pt
retina屏幕上， 1px = 4pt
安卓也因设备的不同而不同
安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级
用户缩放浏览器也会引起css中px的变化
把页面放大一倍，css中1px所代表的物理像素也会增加一倍；
把页面缩小一倍，css中1px所代表的物理像素也会减少一倍
如果让 1px 始终等于 1个物理像素(面试题:如何解决移动端 1px 边框问题)
物理像素
设备像素(device independent pixels)
设备物理像素
所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点
在普通屏幕下1个CSS像素对应1个物理像素
在Retina屏幕下，1个CSS像素对应4个物理像素
pt
DPR(设备像素比)
概念
指开发中1个css像素占用多少物理像素如 dpr= 2代表1个css像素用2x2个物理像素来绘制
未缩放状态下，(在某一方向上，x方向或者y方向)物理像素和CSS像素的初始比例关系
公式
dpr =物理像素/ 逻辑像素
如果获取浏览器中的dpr
window.devicePixelRatio-有兼容性问题
前端开发用才能对不同屏幕做适配
不同的dpr下，加载不同的尺寸的图片
css媒体查询
javascript条件判断
retina屏-视网膜显示屏
历史
从iPhone4开始， 苹果公司为其产品mac、iPhone以及iPad的屏幕配置了Retina屏幕
与像素的关系
1个CSS像素对应4个物理像素
retina屏的 dpr等于2
移动端开发时，设计师一般以 iphone6为模板 设计出2倍设计稿
iphone6像素
iphone6物理像素为 750 * 1334
iphone6 逻辑像素为 375 * 667
原因
2倍图更大，更方便设计师操作
自iphone6开始到iphone8，它们的屏幕物理像素都是750*1334px，750px的设计标准也慢慢的成为移动端设计的标准。
人眼最大的分辩率是750px....不晓得哪个大神说的o(╯□╰)o
为了做多屏幕适配，否则设计师需要出N套设计稿，开发者需要写N套代码
前端开发者拿到2倍设计稿时，单位都需要除以 2
如何适配N种屏幕
小程序的 rpx会自动除以2
rem可以通过js 除以2
可以解决以下问题
border: 1px问题
屏幕适配布局问题
多倍图片问题
容器(如:div) flex布局
文字 流式布局
图片等比缩放
媒体查询
0 条评论
回复 删除
下一页
