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. 节日营销！这样搞-App运营日常

    节日送礼需求日益增长,当儿女们有了购买需求的时候,商家如何突出重围,成为孝子们的首选?如何做好节日营销?几个经验分享一下: 1.抓住节日特色 结合节日风格特色,营造节日气氛,如母亲节这种节日,主要体现 ...

  2. 什么是Familywise Error Rate

    1.什么是Familywise Error Rate(FWE or FWER) 定义:在一系列假设检验中,至少得出一次错误结论的概率. 换句话说,是造成至少一次Type I Error的概率.术语FW ...

  3. 2019年6月车型数据Access数据库+缩略图 更新于2019年6月5日.

    工作需要才来采集的, 数据来源某卡汽车网, 分享出来给需要的人吧, 本着分享的精神, 我就不猥琐的放到csdn下载了 本来是sql server的, 我导出到access了, 也方便大家查看. 顺手抓 ...

  4. Linux基础命令汇总109条

    1       文件管理 1.1     basename 1.1.1     功能说明 从文件名中去掉路径和扩展名 例:basename include/stdio.h .h Output &quo ...

  5. Log parser工具使用

    Windows日志存放于目录“C:\Windows\System32\winevt\Logs”中, 在目录中可以找到“System”.“Setup”.“Application”.“Security” ...

  6. C++（三十四） — 友元函数、友元类

    友元是可以访问类的私有成员和保护成员的外部函数.由 friend 修饰,不是本类的成员函数,但是在它的函数体中可以通过对象名访问本类的私有和保护成员.     友元关系不可传递,且是单向的.    友 ...

  7. Hibernate初探之单表映射——jar包的导入

    编写第一个Hibernate例子需要的基本步骤 创建Hibernate的配置文件 创建持久化类 创建对象-关系映射文件 通过Hibernate API编写访问数据库的代码 使用版本:Hibernate ...

  8. python_面向对象——多继承

    1.多继承 class Shenxian: def fly(self): print('神仙会飞~') class Monkey: def eat_peach(self): print('猴子喜欢吃桃 ...

  9. vue 自定义事件

  10. MySQL 视图 触发器 事务 存储过程 函数 流程控制 索引与慢查询优化

    视图 1.什么是视图? 视图就是通过查询得到的一张虚拟表,然后保存下来,下次可直接使用 2.为什么要使用视图? 如果要频繁使用一张虚拟表,可以不用重复查询 3.如何使用视图? create view ...