css 像素

Hancock_Xu 发布于2019-08-02 12:14 / 1313人阅读

摘要：出现不同手机文字大小不一样的根本原因是在于设备的像素比不一样。通过上述我们可以知道逻辑像素不等于物理像素。渲染像素渲染像素是系统基于逻辑像素进行对应倍增或而得的结果。

前言：

首先先看一张css的单位表：

css提供表达长度的单位有很多种。当我们在选择使用这些单位时，需要去考虑，他们的输出媒体是什么，不同的输出媒体，我们需要使用不同的单位。

目前我们的输出媒体主要有屏幕跟纸张(打印)。下面的图片提供了一个推荐的用法：

1.cm,mm,in,pt,pc

在这么多种单位中cm,mm,in,pt,pc属于绝对单位，使用这些单位前提是输出媒体的分辨率要足够的高（比如镭射打印机）。目前市场上屏幕分辨率有高有低，所以这些单位不是一个好的选择。

绝对单位之间的关系为：1in = 2.54cm = 25.4mm = 72pt = 6pc

2.ex

单位ex：必须与字体的x-height有关的大小（x-字高，指小写字母的高度）。很少使用。

x-字高维基百科的说明是：指字母的基本高度，精确地说，就是基线（英语：baseline）和主线之间的距离。特别的，它指称一个字体中小写字母x的高度，而实际上这也和字母a、c、e、m、n、o、r、s、u、v、w和z的高度是一样的。

3.%

单位%:

line-height: 根据当前字体的值乘以百分比
padding,margin都是相对于父元素的*宽度*(border-box盒模型的话，就是元素内容的宽度)，
heigth是相对于父元素的*高度*为基准，若父元素为auto,则子元素也为auto
width: 在正常文档流，浮动设置中，都是父元素的内容宽度，有定位设置则是需要加上内边距宽度
定位元素的top/right/bottom/left:top,bottom根据父元素的高度为基准，left/right:根据父元素的宽度为基准（都包含内边距的宽度）

4.px

我们在做移动页面开发的时候经常会遇到在不同的手机上看，里面的图片、文字或者线的大小会不一样。在iphone4以前,1px == 1个物理像素的宽度，但是从 iPhone4 开始，苹果推出了视网膜屏幕，分辨率提高了一倍，而屏幕尺寸却没变，这时1px == 4个硬件上的像素点 (2 x 2)（是原来的2倍，后面iphone6s又出现了3倍）。出现不同手机文字大小不一样的根本原因是在于设备的像素比（PPI）不一样。PPI的值越高，画质越好，也就是越细腻，看起来更有逼格。所以我们在移动页面开发中使用px，无法去适应各种屏幕。那么什么是PPI,我们先理解几个概念：物理像素，逻辑像素，渲染像素。

4.1 物理像素：

物理像素（设备像素）即实际的屏幕单元尺寸大小，我们买手机的时候，可以经常看到几个关键词就是：屏幕分辨率（如1920x1080像素），屏幕尺寸（如5.2英寸的屏幕），屏幕像素密度，那么这些都是什么？有什么关系？可以去看这篇文章，讲的很仔细《（全解析）屏幕尺寸，分辨率，像素，PPI之间到底什么关系？》

简化版本：(文中拿华为荣耀7作为例子)

1.屏幕分辨率：分辨率1920px * 1080px的意思就是，在5.2英寸屏幕上，在竖向的高度上有1920个像素块，在横向的宽度上有1080个像素块。

2.屏幕尺寸：这个5.2英寸是手机屏幕对角线的长度，用勾股定理可以直接算出来。

3.屏幕像素密度：每英寸屏幕所拥有的像素数，英文简称PPI，注意这个也是对角线的长度，即在一个对角线长度为1英寸的正方形内所拥有的像素数

4.屏幕像素密度，分辨率，屏幕尺寸的关系可以用一个公式来表示：

最后算出来的结果为华为荣耀7的ppi为423.6359942465958约为424

4.2 逻辑像素：

逻辑像素就是我们常说的css像素单元。通过上述我们可以知道逻辑像素不等于物理像素。

4.3 渲染像素：

渲染像素：是系统基于逻辑像素进行对应倍增（1x、2x 或 3x）而得的结果。

我们在开发移动页面是需要考虑的是如何让页面在各个手机看起来都正常显示，那么我们应该考虑的是渲染像素，但是如果我们针对手机，一个个去匹配的话又不现实。所以这时候我们就应该考虑em跟rem，来弹性适应各种大小。

5.em与rem

em与rem都是根据元素字体的大小的多少来适应的，

em是根据父元素的大小来适应的，可以等比例缩放匹配所有屏幕
如果父元素为16px, 那么子元素1em == 16px。
举个

GPU云服务器云服务器屏幕像素实际像素像素存储高像素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53436.html

【响应式布局】理解设备像素、设备独立像素和css像素

摘要：设备像素设备分辨率设备像素也叫物理像素。从图中可以验证，横纵方向的设备像素数量恰好是设备独立像素的倍。像素与设备独立像素的关系缩放比例就是像素边长设备独立像素边长。因为的宽度没有改变，无论以什么单位衡量设备像素设备独立像素还是像素。这篇文章是我在我的旧博客上发过的文章，最近又碰到这个问题，整理修改了一下发到这里。像素单位像素单位有设备像素、逻辑像素和CSS像素3种。设备像素（d...

sunny5541 2019-08-30 13:51 评论0 收藏0
设备像素，CSS像素，设备独立像素

摘要：设备独立像素是一个整体概念，包括了像素，比如像素，只是在机中，像素不叫像素了，而叫设备独立像素。设备像素和独立设备像素的关系实例已为例设备宽高为，可以理解为设备独立像素或像素。获得设备像素比后，便可得知设备像素与像素之间的比例。 1.概念设备像素（device pixel）简写DP 设备像素又称 **物理像素** ，是设备能控制显示的最小单位，我们可以把它看做显示器上的一个点。我们常...

468122151 2019-08-29 16:15 评论0 收藏0
像素，css像素，物理像素，设备独立像素，分辨率大乱斗

摘要：我们用小米举例，屏幕像素物理像素为，设备独立像素为，也就是说，一个设备独立像素就包含个物理像素，同时我们能得出。本文主要阐述移动端布局中常遇到的一些基本概念，这些概念也适用于PC端，这些概念大概有：像素（pixel），ppi，分辨率，物理像素（physical pixel）， CSS像素，设备独立像素（devicedependent pixel）像素像素是图像显示的基本单位，同时...

LiveVideoStack 2019-08-30 15:54 评论0 收藏0
CSS > 高清缩放原理分析

摘要：最近在研究屏的适配问题，在具体方案讨论之前，陆续做了一些理解笔记，现归纳如下。最近在研究 Retina 屏的适配问题，在具体方案讨论之前，陆续做了一些理解笔记，现归纳如下。具体方案的讨论将另作文章。中的 viewport 是布局视口 initial-scale 等的缩放是基于理想视口的理想视口由设备各自提供，理想视口的宽度也是设备的独立像素所谓独立是说这个设备独立像素和像素...

zhjx922 2019-08-30 12:56 评论0 收藏0
前端：移动开发 - 像素、viewport

摘要：表示单位面积上的物理像素点数目。比如原本像素高的顶部导航栏，在屏上用了个像素的高度来显示。参考译此像素非彼像素译不是像素的像素不是像素移动前端开发之的深入理解移动端尺寸基础知识张鑫旭设备像素比简单介绍知识 CSS 像素、物理像素、PPI CSS 像素 CSS 像素是 Web 编程的概念，本质上是为我们 Web 开发者创建的一个抽象结构，是相对的而不是绝对的。物理像素物理像素是...

QLQ 2019-08-29 10:58 评论0 收藏0
CSS像素(css pixel)及像素单位例如px pt em

摘要：像素概念一般而言，像素是图像的基本采样单位。我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。小序最近在做pc端、微信端、移动端app,公司的每个项目分别都有这三者，在pc端调试页面，像素显示都和预期效果的一样，可是，微信页面和手机页面却天差地别，在goole里调试得好好的，结果，真机看效果，用同事们的手机有不同的显示效果，于是，对于像素单位有了兴趣，...

mochixuan 2019-08-30 13:00 评论0 收藏0