移动端开发基础

移动开发像素知识

px:css pixels 逻辑像素,浏览器使用的抽象单位

dp:物理像素(设备无关像素),跟手机设备有关

dpr:设备像素缩放比,控制px和dp两者的关系

DPI:打印机每英寸可以喷的墨汁点

PPI:屏幕每英寸的像素数量,即单位英寸内的像素密度

计算公式:1px = (dpr)^2 * dp


以iphone5为例子:(屏幕分辨率:1136 * 640,4英寸,dpr:2)

通过上述公式可计算得:320px * 568px(有些人不会算的,自己慢慢琢磨!)


关系图

如果还是不懂,可以直接通过浏览器的开发者模式观看。


手机模拟器


PPI(每英寸的像素密度)的计算:(以iphone5为例子)

计算公式

也可以知道PPI越高,屏幕越清晰,可视度越低,系统的默认缩放比(dpr)越大。

可以从电脑的设备分辨率知道(分辨率越大,图标显示越小;分辨率越小时,图标显示变大,同时屏幕清晰度降低)

为什么呢???    因为:1px中等于更多的物理像素了!!!


拓展下:

Retina屏(高清屏):dpr都是大于等于2

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 刚开始做移动端web开发的同学应该都碰到过页面适配问题,为什么我在开发手机上调试好的页面在其他手机会有这样或那样的...
    留七七阅读 19,476评论 5 80
  • 目录 移动端开发的基本观点 像素基础知识 viewport原理解析 弹性布局 响应式设计 1rem的运用 移动端的...
    犯迷糊的小羊阅读 2,858评论 4 18
  • 移动端开发 我们现在关注的点还在移动M站上,或者我们可以叫做webapp,其实就是运行在移动端浏览器中的web网站...
    WEB攻程狮阅读 671评论 0 0
  • 前言 移动设备越来越普及啦,所以我们不能只停留在开发PC端页面,和一包一起来学学移动端Web开发吧~ 移动开发特点...
    一包阅读 619评论 0 1
  • 最近在重温金庸的书,津津有味、欲罢不能。 作为一个老牌武侠小说爱好者,金大侠的书当然是都一一拜读过了,各位主角熟悉...
    林慕言阅读 417评论 0 1