前端布局px,rem,vw

rem em vw px rpx

1.px

什么是像素：

像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意，有时亦被称为pel(picture element)

像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。

分类：

实际上像素分为两种：设备像素和CSS像素
　　　　　　1、设备像素(device independent pixels): 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的
　　　　　　2、CSS像素(CSS pixels): 又称为逻辑像素，是为web开发者创造的，在CSS和javascript中使用的一个抽象的层
　　　　　每一个CSS声明和几乎所有的javascript属性都使用CSS像素，因此实际上从来用不上设备像素，唯一的例外是screen.width/height

物理像素，设备独立像素，像素比

　　 

我们会发现在iphone5下device-width=320，iphone6下是375，iphone6+下是414，那也就是说device-width其实就是开发中屏幕宽度有多少pt和dp。

第二话——什么是 dp、pt、sp？

device-width在html中也同样被解读为理想（基准）视口的宽度，即320px，375px，414px，这里的px就是指css像素，通常也被称为逻辑像素；那我们可以认为html中的css像素的显示尺寸应该和NA中的pt、dp的显示尺寸相等。

pt是一种固定长度的度量单位，是能够使用测量设备测得的长度。

DPR (倍屏)

设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值
　　dpr，也被成为device pixel ratio，即物理像素与逻辑像素的比，那也就不难理解：iphone6下dpr=2，iphone6+下dpr=3（考虑的是栅格化时的像素，并非真实的物理像素）;

而对于设备像素比DPR也有对应的javascript属性window.devicePixelRatio

2.em

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

特点:

em的值并不是固定的；

em会继承父级元素的字体大小。

image-20220715151112230.png

3.rem

定义:

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

默认情况下，设计图为375时，为了更好的实现与设计稿的单位换算，比如达到：20px=0.2rem的目的，此时1rem=100px，这时可以给予html{font-size：100px；}，同理，当设计稿为414，750时，html的

fontSize = 100*(设计稿尺寸/视口宽度)px

正常开发时，一般输入设计图的px，通过前端项目的webpack等编译工具，进行px->rem的转换，依赖包：amfe-flexible.js

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

看代码可以发现，包作者默认设置1rem=viewWidth / 10，此时假设设备像素为375，则此时1rem=37.5px;

此时，如果代码中写24px，经过webpack转换，在浏览器中就会是：

15/37.5=0.4rem

image-20220715153128438.png

4.vw

vh viewpoint height，视窗高度，1vh 等于视窗高度的 1%
vw viewpoint width，视窗宽度，1vw 等于视窗宽度的 1%

viewport即浏览器可视区域大小
我们可以这样理解 100vw = window.innerwidth, 100vh = window.innerheight
在移动端我们一般都可以认为，100vw就是屏幕宽度。若使用vw布局，就不需要再像rem那样，在js中去动态设置根元素的font-size。

此时，如果我们现在浏览器中想让一个字体大小为15px的元素，则它在浏览器上的显示为

15*(100/375)=4vw

image-20220715154131218.png

为方便开发，引入依赖postcss-px-to-viewport，实现开发时写入设计稿px，得到浏览器显示为vw的效果。

5.rpx

小程序与uniapp使用的单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
但在 App（vue2 不含 nvue）端和 H5（vue2）端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算

image-20220715154528381.png