前言
今天学习了物理与逻辑像素的一些基础,VW, VH新单位,当然只有理论是不够的,开发是一门技术活,有很多细节需要在实践中理解。
【内容】
移动端开发经常遇到一些概念:物理像素、逻辑像素、像素密度、像素比等。
vw和vh是CSS3中的新单位,是一种视窗单位,在移动端也同样适用。
①窗口宽度固定为100vw,将窗口宽度平均分成100份,1份是1vw
②窗口高度固定为100vh ,将窗口高度平均分成100份,1份是1vh
屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米
屏幕分辨率是屏幕像素的数量,一般用屏幕宽度的像素点乘以屏幕高度的像素点,指的是设备屏幕实际拥有的像素点。
【物理像素–UI设计师像素】
重点:
UI----物理像素
前端—逻辑像素
【相关的面试题】
移动端的设计图是几倍图?
苹果6开发,设计师给的是2倍图,375逻辑像素,750设计师
【逻辑像素/设备独立像素】
也叫“设备独立像素”(Device Independent Pixel, DIP),可以理解为反映在CSS/JS代码里的像素点数。
【屏幕像素密度】
每英寸屏幕所拥有的像素数,英文简称PPI (pixels per inch)。
单位dpi
设备像素比(Device Pixel Ratio, DPR):一个设备的物理像素与逻辑像素之比。
所谓“Retina”是一种显示标准,是把更多的像素点压缩至一块屏幕里