为什么移动端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. Unity 声音处理 之 语音识别

    音量检测 检测当前麦克风的输入音量 using System.Collections; using System.Collections.Generic; using UnityEngine; usi ...

  2. Toggle the WinForms Ribbon Interface 切换 WinForms 功能区界面

    In this lesson, you will learn how to enable/disable the Ribbon User Interface in your application. ...

  3. report for PA1

    说明:最近特别忙,都没有时间写blog,好多遇到的问题都没能记下来,下面是PA1的报告主要记录了nemu debuger一些功能的实现方式和实现中遇到的问题,代替一下blog (申明:This is ...

  4. 如何在Python中调用打包好的Jar文件?

    首先是在anaconda中进入我这个项目对应的一个环境,然后在这个环境中下载并且安装jpype.那么就可以直接import了.但是这里出现了一系列的问题 第一个问题,getDefaultJVM()报错 ...

  5. Python Poetry 学习和使用

    Poetry是啥? 是一个Python虚拟环境和依赖管理工具,另外它还提供了包管理功能,比如打包和发布.可以用来管理python库和python程序. 安装Poetry curl -sSL https ...

  6. 01-linux介绍

    一.Linux简介 Linux内核最初只是由芬兰人林纳斯.托瓦兹在大学时出于爱好写出来的,是一套免费使用和自由传播的类Unix操作系统,是基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU ...

  7. Web安全测试学习笔记-DVWA-图片上传

    很多网站都有上传资源(图片或者文件)的功能,资源上传后一般会存储在服务器的一个文件夹里面,如果攻击者绕过了上传时候的文件类型验证,传了木马或者其他可执行的代码上去,那服务器就危险了. 我用DVWA的文 ...

  8. 你的首个golang语言详细入门教程 | your first golang tutorial

    本文首发于个人博客https://kezunlin.me/post/a0fb7f06/,欢迎阅读最新内容! your first golang tutorial go tutorial version ...

  9. Java描述设计模式(10):组合模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.生活场景 1.文件系统 下图是常见的计算机文件系统的一部分. 文件系统是一个树结构,树上长有节点.树的节点有两种: 树枝节点 即文件夹,有 ...

  10. SpringBoot打包为war包,并在tomcat中运行

    先看一下我创建的最简单的项目吧. controller类 @RestController public class TestController { @RequestMapping("ind ...