为什么移动端CSS里面写了1px,实际上看起来比1px粗
了解设备物理像素和逻辑像素的同学应该很容易理解,其实这两个px的含义其实是不一样的,
UI设计师要求的1px是指设备的物理像素1px,而CSS里记录的像素是逻辑像素,它们之间存在一个比例关系
可以用javascript中的window.devicePixelRatio来获取,也可以用媒体查询的-webkit-min-device-pixel-ratio来获取。当然,比例多少与设备相关。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放。
或许你已经明白1px变粗的原因是啥了,
viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性,
它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。

物理像素[设备像素] & 逻辑像素[CSS像素];的更多相关文章

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

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

  2. CSS像素、设备独立像素、设备像素之间关系

    CSS像素.设备独立像素.设备像素,三者联系紧密又有很大的区别,而我们主要是在做移动端开发的时候需要更多地用到这些概念,那他们分别是指什么呢? 概念 CSS像素(CSS Pixel):适用于web编程 ...

  3. 理解设备像素、设备独立像素、css像素、viewport

    设备像素也叫物理像素. 设备像素指的是显示器上的真实像素,每个像素的大小是屏幕固有的属性,屏幕出厂以后就不会改变了. 设备分辨率描述的就是这个显示器的宽和高分别是多少个设备像素. 设备像素和设备分辨率 ...

  4. HTML-HTML5+CSS3权威指南阅读(五、设备像素和CSS像素的概念)

    在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕 这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似 ...

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

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

  6. 设备像素,设备独立像素,CSS像素

    之前学了移动端的开发对设备像素.设备独立像素.CSS像素弄得不太清楚,所以趁周末的时间查了一下,稍加整理 一些概念 在进行具体的分析之前,首先得知道下面这些关键性基本概念. CSS像素 CSS像素是W ...

  7. 设备像素,CSS像素,设备独立像素

    1.概念 设备像素(device pixel)简写DP 设备像素又称 **物理像素** ,是设备能控制显示的最小单位,我们可以把它看做显示器上的一个点.我们常说的 1920x1080像素分辨率就是用的 ...

  8. 响应式设计:理解设备像素,CSS像素和屏幕分辨率

    概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的 ...

  9. 针对iPhone的pt、Android的dp、HTML的css像素与dpr、设计尺寸和物理像素的浅分析

    最近被一朋友问到:css中设置一DOM的height:65px,请问显示的高度是否和Android的65dp的元素等高?脑子里瞬间闪现了一堆的概念,如dpr,ppi,dp,pt等,然而想了一阵,浆糊了 ...

随机推荐

  1. Password Management:Password in Configuration File 密码管理:配置文件中的密码

  2. IPFS学习-内容标识符(CIDs)

    内容标识符(CIDs) 内容标识符也称为CID,是用于指向IPFS中材料的标签. 它不会指示内容的存储位置,但会根据内容本身形成一种地址. CID简短,无论其基础内容的大小如何. CID基于内容的加密 ...

  3. IP地址的格式和分类

    IP地址 IP地址时IP协议提供的一种地址格式,它为互联网上的网络设备分配一个用来通信的逻辑地址,目前分为IP v4和IP v6两种,v4的意思是version4,v6是同样的意思. IP v4 IP ...

  4. JWT基础知识

    1> JWT定义 JSON Web Token (JWT) 是一种开放的行业标准(RFC 7519),用于安全传送认证信息. 是目前流行的跨域认证的解决方案. 2> JWT数据结构 由三部 ...

  5. 44.QT-安装MySQL、测试连接MySQL

    在上章学习了42.QT-操作SQLite数据库后,发现MySQL和SQLite的语句都大致相同,所以本章只测试MySQL是否能使用 MySQL安装参考链接:https://blog.csdn.net/ ...

  6. ABP入门教程0 - 目录

    ABP入门教程 本教程主要讲解如何基于ABP实现CURD(增删改查)示例. 源码已分享:   GitHub   Gitee ABP入门教程0 - 目录 ABP入门教程1 - 开篇 ABP入门教程2 - ...

  7. 详解Python函数参数定义及传参(必备参数、关键字参数、默认可省略参数、可变不定长参数、*args、**kwargs)

    详解Python函数参数定义及传参(必备参数.关键字参数.默认可省略参数.可变不定长参数.*args.**kwargs) Python函数参数传参的种类   Python中函数参数定义及调用函数时传参 ...

  8. [20191220]关于共享内存段相关问题.txt

    [20191220]关于共享内存段相关问题.txt --//我一直很好奇如果设置内核参数kernel.shmmax = 68719476736足够大,为什么我的测试实例还是建立3个共享内存段.--// ...

  9. linux离线安装mysql5.7

    下载安装包 下载地址:https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.27-1.el7.x86_64.rpm-bundle.tar 上传到 / ...

  10. memcache和redis缓存对比及我为什么选择redis

    对比结论 1. 性能上: 性能上都很出色,具体到细节,由于Redis只使用单核,而Memcached可以使用多核,所以平均每一个核上Redis在存储小数据时比Memcached性能更高.而在100k以 ...