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. springboot笔记04——读取配置文件+使用slf4j日志

    前言 springboot常用的配置文件有yml和properties两种,当然有必要的时候也可以用xml.我个人更加喜欢用yml,所以我在这里使用yml作为例子.yml或properties配置文件 ...

  2. Go 操作 Mysql（二）

    查询数据方法回顾整理 上一篇博客中,主要是快速过了一遍 demo 代码和 DB 类型对象中方法的使用 在整理查询数据方法的时候,使用了 Query() 方法,其实 sqlx 还提供了 QueryRow ...

  3. Extjs 兼容IE8常见问题及解决方法

    1. 在IE8中整个页面都打不开,一般情况是: 页面组件中最后一个属性出现了逗号 没有多余的逗号,就很有可能是组件中没有设置renderTo:Ext.getBody(); 2. 页面按钮颜色失效 自定 ...

  4. Vue指令之`v-bind`的三种用法及v-on事件指令

    v-bind:是 Vue中,提供的用于绑定属性的指令 1. 直接使用指令`v-bind` 2. 使用简化指令`:` 3. 在绑定的时候,拼接绑定内容:`:title="btnTitle + ...

  5. JAVA笔记整理（四），JAVA中的封装

    什么是封装 所谓的封装就是把数据项和方法作为一个独立的整体隐藏在对象的内部,具体的实施细节不对外提现,仅仅保留有限的外部接口,封装外的用户只能通过接口来进行操作.就好比开启一台电脑需要进行很多个步骤, ...

  6. frp服务搭建

    安装命令 C wget --no-check-certificate https://raw.githubusercontent.com/clangcn/onekey-install-shell/ma ...

  7. FM系列

    在计算广告中,CTR是非常重要的一环.对于特征组合来说,业界通用的做法主要有两大类:FM系列和Tree系列.这里我们来介绍一下FM系列. 在传统的线性模型中,每个特征都是独立的,如果需要考虑特征与特征 ...

  8. python开发全自动网站链接主动提交百度工具

    自己网站因数据比较多,趁晚上没事就写了一个通过python爬取url自动提交给百度,实现网站全站提交的思路,代码实现很简单,因为编写时间仓储,难免有些bug,可以放在服务器上配置下定时爬取提交. im ...

  9. 修改git提交的用户名和密码

    目的:每个项目自定义Git提交的用户名和邮箱 1.在本地找到某个项目所在的地址 2.找到config文件 3.增加如下配置 4. ok,这样每个项目都可以定义提交者姓名和邮箱了

  10. CentOS环境部署（Nginx+Mariadb+Java+Tomcat）

    1.安装nginx 安装 yum install nginx 启动 yum install nginx 开机自启 sudo systemctl enable nginx 2.安装mariadb 安装 ...