CSS尺寸单元

访客3年前 (2021-02-20)黑客工具703

前端开发过程中，尺寸单米是我们必须用到的，下面我们对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="a1a8-dd71-ddb1-c652 my-div">
    <p class="dd71-ddb1-c652-a577 parent-font">
      我是父级文字
      <span class="ddb1-c652-a577-18be 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！

思源资源网：分类流动

1.阿里云: 本站现在使用的是阿里云主机，平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

返回列表

上一篇：有办法查出闺蜜QQ信息记录

下一篇：玉树是哪个省的（舌尖上的青海，青海省玉树州的美食有哪些？）

找黑客平台

CSS尺寸单元

基本观点

像素

物理像素

装备自力像素

装备像素比（device pixel radio）

Retina屏幕

px

浏览器缩放

em

rem

rem解决了哪些问题

rpx

相关文章

黑客软件自动下载（黑客工具下载）

蒙古国宣布将进入全国广州军区中将被免警戒状态以防控新冠疫情

找黑客协助盗个QQ号(怎么找黑客协助)

ghost win7安装教程,win7 极度纯净版

邮箱收到黑客中文勒索邮件（黑客诈骗邮件）

新招骋上海市商务接待在校大学生英雄联盟璐璐立刻动工【喻万敏】

Copyright Your WebSite.Some Rights Reserved.

Hacker by Hacker.