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

dp,pt :device independent pixels 设备无关像素

dpr:devicePixelRatio 设备像素缩放比

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

iphone 5 的dpr等于2

因此：平面上 1px=4*dp  640dp*1136dp

　　　纬度上 1px=2*dp  320px*568px

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

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

在计算机显示设备参数描述上，二者意思表达的是一样

计算公式：以iphone5为例

ppi=√（11362+6402）/4=326ppi(视网膜Retina屏) 注意：单位为硬件像素，非px


ppi越高，像素数越高，图像越清晰

但可视度越低（小），系统默认设置缩放比越大

移动端web之像素基础的更多相关文章

  1. 移动端web开发基础概念

    最近在了解移动端web开发的相关知识,有些概念总是模糊不清,这次花费了一些时间整体的梳理了一遍. 分辨率 分辨率可以从显示分辨率与图像分辨率两个方向来分类.显示分辨率(屏幕分辨率)是屏幕图像的精密度, ...

  2. web端 第一天认识基础

    .NET 分为两大类 一.客户端应用程序   C/S 技术: Winform WPF MFC   MVVM 二.外部端应用程序  B/S(网页端应用程序/WEB端/WEB端应用程序) 目前学的技术是A ...

  3. 【超级干货】手机移动端WEB资源整合

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  4. 手机移动端WEB资源整合

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  5. 移动端web开发进阶

    三个月前曾写过一篇跨终端响应式页面设计入门的博客,上了博客园头条也得到了不少关注,今天想在这篇博客的基础上,继续写一篇进阶的文章. 补充 基于“入门”一文,我想再补充几个基础知识点,主要都是针对iOS ...

  6. 【超级干货】手机移动端WEB资源整合：转载

    转载于:http://www.w3cfuns.com/notes/24611/fbba9cbd616e795360ea45515494aa53.html meta基础知识 H5页面窗口自动调整到设备宽 ...

  7. Web开发——HTML基础

    文档资料参考: 参考:MDN官网 参考:http://www.runoob.com,W3School 参考:https://developer.mozilla.org/zh-CN/docs/Learn ...

  8. 移动端web开发技巧（转）

    原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我 ...

  9. 【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑（三）

    前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_el ...

随机推荐

  1. cat *.txt | grep '>' | wc -l

    find the line where the '>' located, and make a statistic.

  2. PPAS Migration Toolkit document

    -----------------Migration Toolkit-----------------Migration Toolkit is a command line utility that ...

  3. C#窗体 自定义控件

    1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Dr ...

  4. .NET学习记录3

    一.ASP.NET ISAPI与IIS IIS如何监听来自外界的http request ,如何根据ISAPI Extension Maping 将对于不同的resource的请求分发给不同的ISAP ...

  5. checkbox实现单选，全选，反选，取消选

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  6. curl_init函数用法

    使用PHP的cURL库可以简单和有效地去抓网页.你只需要运行一个脚本,然后分析一下你所抓取的网 页,然后就可以以程序的方式得到你想要的数据了.无论是你想从从一个链接上取部分数据,或是取一个XML文件并 ...

  7. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

  8. Unity使用反射探头实现地面的镜面反射

    最近在看之前的愤怒机器人demo,它的反射通过一个反射相机实现 我尝试在unity5里用反射探头做出镜面反射,但想要调的准确倒是比较难.. .. 后来朋友发我一份反射探头实现镜面反射的文章,解决了这个 ...

  9. elasticsearch安装与基础用法

    来自官网,版本为2.3 注意elasticsearch依赖jdk,2.3依赖jdk7 下载rpm包并安装 wget -c https://download.elastic.co/elasticsear ...

  10. Unity-Animator深入系列---API详解

    回到 Animator深入系列总目录 测试Unity版本为5.2.1 人形动画的接口都有标注 本列表不包含所有标注为过时的方法 1.Vector3 angularVelocity { get; } [ ...