设计稿还原相关知识
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)
为什么
苹果操作系统的内部机制
应用场景
用在ps(平面设计)中,如海报，喷绘广告等
在图像处理中选择合适的设备分辨率值和图像分辨率值，
既能保证图像质量，又能减少文件大小
既能保证图像质量，又能减少文件大小
用在移动端设计稿中
分辨率决定了设计稿应该出几倍图
像素
逻辑像素
别名
设备独立像素(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像素点
指的是设备以多少物理像素来显示一个CSS像素，
也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点
在普通屏幕下1个CSS像素对应1个物理像素
在Retina屏幕下，1个CSS像素对应4个物理像素
单位
pt
DPR(设备像素比)
概念
指开发中1个css像素占用多少物理像素
如 dpr= 2代表1个css像素用2x2个物理像素来绘制
如 dpr= 2代表1个css像素用2x2个物理像素来绘制
未缩放状态下，(在某一方向上，x方向或者y方向)物理像素和CSS像素的初始比例关系
公式
dpr =物理像素/ 逻辑像素
如果获取浏览器中的dpr
window.devicePixelRatio-有兼容性问题
应用场景
知道了dpr,设计师才能对应 N倍屏出对应尺寸的设计稿及图片
前端开发用才能对不同屏幕做适配
不同的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 条评论
下一页
