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. WebSocket 的应用

    后面用到了再来做整理 链接地址:https://www.cnblogs.com/zhaof/p/9833614.html

  2. jQuery 事件介绍

    什么是事件?页面对不同访问者的响应叫做事件.事件处理程序指的是当 HTML 中发生某些事件时所调用的方法. 常用的时间主要有以下几种: click()事件:click() 方法是当按钮点击事件被触发时 ...

  3. css 层叠 比较特殊性

    css 层叠: 多个相同的css声明(属性),应用到同一个元素上.当一个标签声明冲突时,浏览器会自动出发层叠机制 1:比较优先级 2:比较特殊性 3:比较源次序 依次经过上面的1,2,3的比较后,最终 ...

  4. 加快JavaScript加载和执行效率

    JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其 ...

  5. 记一次渗透某XX站

    0X00 前言 团队A师傅发来个站,问我有没有得搞 正好在搞其他的站,卡住了,开干换个思路. 0x01 信息收集 开burp抓了下包,目标设置了url重写,开了报错,我们随意输入一个控制器就直接报错. ...

  6. Android 在同一台设备上安装多个同一项目的apk

    如果设备上已经安装了一个apk,再次安装这个apk就会提示覆盖前面的应用 解决办法: 方法一:手动改包名 不好改,改了几次都不成功(可能是代码在svn管理的原因,改完后文件夹里的代码就没了),确实不实 ...

  7. python之迭代器、生成器及列表推导式

    一.迭代器 迭代器就是迭代的工具,迭代是一个重复的过程,每次重复都是一次迭代并且每次迭代的结果都是下次迭代的初始值. lst=[1,2,3,4,5] count=0 while count<le ...

  8. Mysql安装与问题合集

    下载mysql https://dev.mysql.com/downloads/mysql/ 下载历史版本 看这篇文章 https://www.cnblogs.com/reyinever/p/8551 ...

  9. [Abp vNext微服务实践] - 框架分析

    一.简介 abp vNext新框架的热度一直都很高,于是最近上手将vNext的微服务Demo做了一番研究.我的体验是,vNext的微服务架构确实比较成熟,但是十分难以上手,对于没有微服务开发经验的.n ...

  10. sudo 权限的管理

    一.sudo执行命令的流程将当前用户切换到超级用户下,或切换到指定的用户下,然后以超级用户或其指定切换到的用户身份执行命令,执行完成后,直接退回到当前用户.具体工作过程如下:当用户执行sudo时,系统 ...