CSS尺寸单位详解

端开发过程中，尺寸单位是我们必须用到的，下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍

在这之前，需要先对几个概念进行普及介绍

基本概念

（以下概念读起来可能有些晦涩，如果看不懂也没关系）

像素

它不是自然界的物理长度，指基本原色素及其灰度的基本编码。

css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。

在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。

在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。

后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。

物理像素

它是显示器（电脑、手机屏幕）最小的物理显示单位，物理像素指的是显示器上最小的点。物理像素的大小取决于屏幕。是一个无法改变的属性。

设备独立像素

我上一张图，你就会理解什么是设备独立像素

就是我们开发过程中使用的css中的px

设备像素比（device pixel radio）

设备像素比 = 物理像素 / 设备独立像素，单位是dpr！（device pixel radio）

Retina屏幕

所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。也被称为视网膜显示屏 ——百度百科

因为Retina屏幕的出现，在pc端默认情况下，css中的1px等于1物理像素，但在移动端1px不一定等于1物理像素，比如说iPhone的设备独立像素是375 667，因为它使用了Retina屏幕，他的dpr是2，所以iPhone 6 的物理像素为 750 1334

在不同的屏幕上(普通屏幕 vs retina屏幕)，css中1px所呈现的大小(物理尺寸)是一致的，不同的是1px所对应的物理像素个数是不一致的。

在普通屏幕下，1px 对应 1个物理像素(1:1)。在Retina屏幕下（dpr=2），1px对应 2x2个物理像素(1:4)。

你会发现，在移动端开发中使用了图片（img标签），2倍图要比1倍图清晰，就是这个缘故

默认情况下像素px是相对于屏幕分辨率而言，比如说我们的屏幕分辨率是1440 X 900，说的就是像素1440px X 900px；

这里会遇到另一种情况

### 浏览器缩放

缩放是缩放CSS像素(缩放比例为1时,一个CSS像素等于一个屏幕像素)，就是在屏幕分辨率不变的情况下，用户对浏览进行了缩放

强调一点，用户的缩放行为是对浏览器进行的，缩放的是css像素，而非分辨率，分辨率是屏幕的分辨率，不论你怎么缩放当前页面，屏幕分辨率都不会改变

我们知道在移动端可以在一定程度上控制用户的缩放行为，也可以禁止用户缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0">

content属性值 :

width:可视区域的宽度，值可为数字或关键词device-width
height:可视区域的高度，值可为数字或关键词device-height
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放

但是在pc端就麻烦了

windows：

ctrl + +/-
ctrl + 滚轮
浏览器菜单栏

mac：

cammond + +/-
浏览器菜单栏

由于浏览器菜单栏属于系统软件权限，没发控制，我们可以通过js控制ctrl/cammond + +/- 或 Windows下ctrl + 滚轮缩放页面的情况

本人在实际开发过程中并没有使用过em单位，但是后面要说的rem是基于em的，所以，对em进行简单介绍

em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

em的值并不是固定的；
em会继承父级元素的字体大小；
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。body选择器中声明Font-size=62.5%<==>1em=10px。

看个栗子吧

<body>
 <style>
 html {
 font-size: 50px;
 }

 .my-div {
 width: 100%;
 height: 500px;
 margin-top: 50px;
 background-color: gray;
 font-size: 40px;
 }

 .my-div .parent-font {
 font-size: 30px;
 }

 .my-div .parent-font .child-font {
 font-size: 0.5em;
 }
 </style>
 <div class="my-div">
 <p class="parent-font">
 我是父级文字
 <span class="child-font">我是子级文字</span>
 </p>
 </div>
</body>

html代码中，

第一级，html的 font-size: 50px;

第二级，my-div 的 font-size: 40px;

第三级，parent-font 的 font-size:30px;

第四级，child-font 的 font-size: 0.5em;

我们通过浏览器查看，发现第四级的fong-size为15px；

我们取消第三级parent-font 的字体大小

我们通过浏览器查看，发现第四级的fong-size为20px；

当我们取消第三级font-size后，第三级的字体大小为40px；

所以我们说em的字体大小不是固定的，em的大小取决于父级的字体大小

当父级的字体大小为20px，子级的1em就是20px

当父级的字体大小为30px，子级的1em就是30px

那么说font-size存在着继承父级的特点

我们在第一级html中设置font-size，第二级继承第一级，第三级继承第二级，第四级继承第三级，以此类推

每一级都继承自它的父级，也就是说每一级的em所代表的px大小都不是固定的，因为他们的父级不是同一个，所以em的应用场景并不多。

那么如果是em的都继承自同一个地方，是不是可以解决很多问题呢？

这时候rem出现了

rem

rem 是CSS3的一个相对单位（root em，根em）

使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素

只要html的font-size大小不变，1rem所代表的font-size大小就不会变，rem只取决于html的font-size

rem解决了哪些问题

移动设备的宽度是各种各样的，每个设备的dpr也不同，换句话说就是不同设备每一行的物理像素数不同，能显示的css的px数也不同，

如果我们写一个div，宽度是375px，375px在这个屏幕（iPhone6）上是刚刚满屏，因为这个屏幕宽度刚刚是375px( 设备独立像素)，

当我们换另一个宽度是414px的设备（iPhone6Plus）时，这个宽度375px的div就无法铺满这个屏幕，同样的当换一个iPhone5（320px），又会出现滚动条，安卓机的宽度更是五花八门，使用media媒体查询不靠谱，因为它不能覆盖所有的机型宽度

我们之前说rem的大小是相对于html的font-size的，如果html的font-size根据不同设备的宽度做动态计算，问题就会得到解决

我们写页面都是根据UI设计稿来做的，我们假设UI设计稿的宽度是750px（750px是常规宽度，当然也可以是640px或是其他宽度，但是整个项目，宽度必须统一），唯一不变就是就屏幕宽度，我们的html的font-size（rem）只取决于设备宽度

于是

document.documentElement.style.fontSize = 100 * ( document.documentElement.clientWidth / 750) + 'px'

html的font-size：document.documentElement.style.fontSize

设备的宽度：document.documentElement.clientWidth

750：UI设计稿的宽度

为了方便计算我们将font-size x 100，方便计算（乘100不是必须的，我接触过一些项目就不是乘以100，但是UI设计稿中使用了sketch做了动态计算，但我还是建议乘100，不然遇到psd的设计图就很麻烦了）

对上面的js做些完善

const fontFun = function () {
 let docEl = document.documentElement
 let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
 const recalc = function () {
 let clientWidth = docEl.clientWidth
 if (!clientWidth) return
 docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
 }
 if (!document.addEventListener) return
 window.addEventListener(resizeEvt, recalc, false)
 window.addEventListener('pageshow', recalc, false)
 document.addEventListener('DOMContentLoaded', recalc, false)
}
export {
 fontFun
}

对以上代码不做过多解释

也可以这样写

(function(doc, win) {
 var docEl = doc.documentElement,
 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 recalc = function() {
 var clientWidth = docEl.clientWidth
 if (!clientWidth) return
 docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
 }
 if (!doc.addEventListener) return
 win.addEventListener(resizeEvt, recalc, false)
 win.addEventListener('pageshow', recalc, false)
 doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

iPhone5(320px)下html的font-size:42.6667px,1rem=42.6667px

iPhone6(375px)下html的font-size:50px,1rem=50px

iPhone6Plus(414px)下html的font-size:55.2px,1rem=55.2px

rem是继承自html的font-size，但是小程序中没有html，那怎么办呢？

rpx

我不基于html的font-size了，我基于一个别的值就行了，你也不需要计算这个值，我给你计算了，这就是rpx。

最终的效果就是，你开发时在iphon6的设计稿上量了多少px，就写多少rpx就行了，完美适配，perfect！

例

Norwegian Mountain Trip

在线实例

插入图像

本例演示如何在网页中显示图像。

从不同的位置插入图片

本例演示如何将其他文件夹或服务器的图片显示到网页中。

（可以在本页底端找到更多实例。）

HTML 图像- 图像标签（ <img>）和源属性（Src）

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像- 设置图像的高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素:

提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

基本的注意事项 - 有用的提示：

注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

更多实例

排列图片

本例演示如何在文字中排列图像。

浮动图像

本例演示如何使图片浮动至段落的左边或右边。

设置图像链接

本例演示如何将图像作为一个链接使用。

创建图像映射

本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

HTML 图像标签

标签	描述
<img>	定义图像
<map>	定义图像地图
<area>	定义图像地图中的可点击区域

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

TML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和它相关的属性。图像标签的基本语法格式如下。

<img src="图像URL" />

在上面的语法中，src属性用于指定图像文件的路径和文件名，是img标签的必需属性。

要想在网页中灵活地使用图像，仅仅依靠src属性是远远不够的。为此HTML还为<img />标签准备了其他的属性，具体如表2-5所示。

表1 <img />标签的属性

表1对<img />标签的常用属性做了简要的描述，下面对它们进行详细讲解，具体如下：

1.图像的替换文本属性alt

有时页面中的图像可能无法正常显示，如图片加载错误，浏览器版本过低等。因此为页面上的图像添加替换文本是个很好的习惯，在图像无法显示时告诉用户该图片的信息，这就需要使用图像的alt属性。

2.图像的宽度和高度属性 width、height

通常情况下，如果不给<img />标签设置宽高属性，图片就会按照它的原始尺寸显示，此外，也可以通过width和height属性用来定义图片的宽度和高度。通常我们只设置其中的一个属性，另一个属性则会依据前一个设置的属性将原图等比例显示。如果同时设置两个属性，且其比例和原图大小的比例不一致，显示的图像就会变形或失真。

3.图像的表框属性 border

默认情况下图像是没有边框的，通过border属性可以为图像添加边框、设置边框的宽度，

4.图像的边距属性 vspace、hspace

在网页中，由于排版需要，有时候还需要调整图像的边距。HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。

5.图像的对齐属性align

图文混排是网页中很常见的效果，默认情况下图像的底部会与文本的第一行文字对齐，如图1所示。

图 1 图像标签的默认对齐效果

但是在制作网页时需要经常实现图像和文字环绕效果，例如左图右文，这就需要使用图像的对齐属性align。

注意：

1、实际制作中并不建议图像标签<img />直接使用border、vspace、hspace及align属性，可用CSS样式替代。

2、网页制作中，装饰性的图像不建议直接插入<img />标签，最好通过CSS设置背景图像来实现。

在线咨询

上一篇：图片轮播的实现：HTML+CSS+ JavaScript
下一篇：这是一份你值得保存学习的HTML5技术干货整理分享

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS尺寸单位详解

您的项目需求