CSS尺寸单元

访客4年前 (2021-02-20)黑客工具728

前端开发过程中，尺寸单米是我们必须用到的，下面我们对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

默认情形下像素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

本人在现实开发过程中并没有使用过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="7595-08bf-d5a1-9fbd my-div">
    <p class="08bf-d5a1-9fbd-d959 parent-font">
      我是父级文字
      <span class="d5a1-9fbd-d959-962f 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，那怎么办呢？