Web developers need CSS pixels, that is, the pixels that are used in CSS declarations such as "  font-size:14px; ".

These pixels have nothing to do with the actual pixel density of the device. They are  essentially an abstract construct created specifically for us web developers.

It's easiest to explain when we consider zooming. If the user zooms in, an element with " width:300px; " takes up more and more of the screen, and thus use more and mroe device pixels(physical). In CSS pixels, however, the width remains 300px.

In  <meta name="viewport" width="device-width"> , width querys the total width of the page in CSS pixels, the device-width querys the width of the device in device pixels.

CSS Pixel 和 Device pixels的更多相关文章

  1. 一些关于Viewport与device-width的东西～

    进行移动web开发已经有一年多的时间了,期间遇到了一些令人很困惑的东西.比如: 我们经常使用的<meta name="viewport" content="widt ...

  2. 转: 关于viewport的理解

    最近我做了一点儿针对手机的Web开发和相关研究.按说,Web自设计之初,就已经考虑了设备无关性.然而,现实总是不尽如人意. 我们知道大多数网页都是针对桌面显示器开发和测试的,但是手机屏幕通常要比桌面显 ...

  3. 一些关于Viewport与device-width的东西～（转）

    内容转自 http://www.cnblogs.com/koukouyifan/p/4066567.html 非常感谢 口口一凡 为我们提供的这篇文章,受益匪浅,特地转到自己的博客收藏起来. 以下是原 ...

  4. <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>

    <meta charset="utf-8" name="viewport" content="width=device-width, initi ...

  5. Device Pixel Ratio & Media Queries

    一些重要的名词解释: CSS pixels(CSS 像素):详见http://www.w3.org/TR/css3-values/#reference-pixe CSS声明的像素值,可随着放大缩小而放 ...

  6. CSS布局基础之一设备像素，设备独立像素，设备像素比，css像素之间的关系

    设备像素dp(device pixels) ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目,数值越高,代表屏幕能以更高的密度显示图像. 计算公式:ppi=像素数量/物 ...

  7. [Canvas] Make Canvas Responsive to Pixel Ratio

    Canvas is great for high performance graphics rendering but by default the results look blocky on ph ...

  8. CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

    1.PX(CSS pixels) 1.1 定义 虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. 1.2 注意 在CS ...

  9. CSS媒体查询 width VS device-width

    In CSS media the difference between width and device-width can be a bit muddled, so lets expound on ...

随机推荐

  1. robot framework 如何处理循环条件下面的变量自增

    下面举了一个基础栗子,可以运行的.${num}就是我需要的自增变量.有人也许会问为什么不用${i},不是我不想用,而是我${i}有其他用处,必须另外定义一个变量,需要注意的是定义变量的时候,应该在循环 ...

  2. Python初识对象

    一 楔子 你现在是一家游戏公司的开发人员,现在需要你开发一款叫做<人狗大战>的游戏,你就思考呀,人狗作战,那至少需要2个角色,一个是人, 一个是狗,且人和狗都有不同的技能,比如人拿棍打狗, ...

  3. VIO的一些随笔

    大公司跑在手机的似乎都是滤波MSCKF那种,有优化的但似乎功耗不行.还有就是杂交的前端滤波后面在挂地图,反正国内的似乎就是SVO, VINS, ORBSLAM,MSCKF组合起来. 缺啥补啥,那个太烂 ...

  4. 阿里面试官总结40 个 Java 多线程问题

    前言 这篇文章主要是对多线程的问题进行总结的,因此罗列了40个多线程的问题. 这些多线程的问题,有些来源于各大网站.有些来源于自己的思考.可能有些问题网上有.可能有些问题对应的答案也有.也可能有些各位 ...

  5. C#-调试记Log文件

    using System.IO; //捕获异常写入Log catch (Exception ex) { string msg = ex.Message + ex.StackTrace; string ...

  6. 【DRF框架】利用序列化组件操作

    使用序列化组件进行操作 不带参数:查+增 带参数:查.改.删 不带参数的操作 # url路由 url(r'^book_list/$',Search_book.as_view()), # views.p ...

  7. java - day011 - 集合, ArrayList HashMap,HashSet, Iterator 接口, for-each 循环格式

    集合 ArrayList 丑数: 能被3,5,7整除多次, ArrayList     list 接口             | - ArrayList             | - Linked ...

  8. syzkaller安装

    初始环境配置 sudo apt-get install subversion sudo apt-get install g++ sudo apt-get install git sudo apt in ...

  9. 数据库管理工具-Navicat Premium 12

    首先感谢下github上大佬,我才能使用这个软件.也可以直接浏览https://github.com/DoubleLabyrinth/navicat-keygen进行安装,非常详细. 1.https: ...

  10. MCUXpresso IDE：导入Kinetis Design Studio工程

    我的许多当前活跃的工程都在使用恩智浦的Kinetis Design Studio(KDS)V3.2.0(我在GitHub上发表了许多工程). 现在随着MCUXpresso IDE的出现(参见“MCUX ...