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. 预编译And作用域链

    首先要理解什么是预编译: 预编译就是在JS执行前的一瞬间创建一个AO对象,这个创建AO的过程叫做预编译. console.log(a) var a = 1; function c(b){ b = 10 ...

  2. Android NDK 学习之在C中抛出异常

    本博客主要是在Ubuntu 下开发,且默认你已经安装了Eclipse,Android SDK, Android NDK, CDT插件. 在Eclipse中添加配置NDK,路径如下Eclipse-> ...

  3. [原]Object-Oriented Programming With ANSI-C

    前一段时间面试被问到一个问题,怎么用C去实现面向对象的特性,比如封装.继承和多态.我心想这不是闲的蛋疼么,好吧,我承认我不会...[大哭].然后去网上找相关的文章,有文章推荐了<Object-O ...

  4. Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. IDEA类的旁边有个对勾

    说明该类添加到IDEA的书签栏去了,在IDEA左侧下方有个Favorites选项,在这里的BookMarks中可以看到这个类. 取消方法: 选中这个类,按F11即可取消

  6. Spring Boot配置多数据源并实现Druid自动切换

    原文:https://blog.csdn.net/acquaintanceship/article/details/75350653 Spring Boot配置多数据源配置yml文件主数据源配置从数据 ...

  7. 基于ELK的日志分析、存储、展示

    原文:https://blog.51cto.com/11134648/2163789 ELK简介 ELK是一套完整的日志解决方案,由ElasticSearch.Logstash. Kibana这三款开 ...

  8. springboot 配置 中查找application.properties中对应的数据，添加对应的prefix前缀

    @ConditionalOnProperty(prefix = "spring.redis", name = "enabled", havingValue = ...

  9. 【胡搞的不能AC的题解，暴力搜索一发博弈问题】1995 三子棋 - 51Nod

    1995 三子棋 题目来源: syu校赛 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 原题链接: https://www.51nod.com/onlineJudge/ ...

  10. 男上加男团队对 修!咻咻! 团队,云打印 团队的Beta产品测试报告

    男上加男团队对 修!咻咻! 团队的Beta产品测试报告 男上加男团队对云打印 团队的Beta产品测试报告 6.2 1.57分补充 睡觉前看终于看到发布的在线版本 重新测试了一下 卡在注册这关 无法收到 ...