Para adaptar a página a dispositivos com diferentes resoluções, unidades fixas não podem ser usadas, e unidades relativas rem e vw precisam ser usadas para controlar dinamicamente o tamanho da página

Pixels Lógicos vs. Pixels Físicos

O nome completo de px é pixel, comprimento do pixel, comprimento do pixel, então eu gostaria de perguntar, o tamanho do pixel de uma tela supergrande é igual ao tamanho do pixel da tela do seu notebook ou celular? Ou seja, o comprimento de 1px exibido na tela do seu celular pode ser 0,1mm, e o comprimento na tela eletrônica de uma performance ao ar livre é 5cm, então 0,1mm e 5cm são iguais?

Parece que px é uma unidade relativa, mas se for colocado aos olhos de uma página da Web ou de um designer, pode não ser necessariamente verdadeiro. O exemplo acima é um pixel físico. No contexto de pixels físicos, px é realmente um unidade relativa, mas na lógica os pixels são diferentes. 1px em css refere-se a pixels lógicos. O navegador converterá seus pixels lógicos em pixels físicos. Embora o tamanho dos pixels físicos seja diferente entre cada dispositivo, depois de usar a unidade de pixels lógicos, o exibição terá o mesmo comprimento.

Ao desenvolver uma página da Web, escrevi 10px. No seu dispositivo, o 1px lógico é o tamanho real de 1,2 pixels, mas na verdade parece 10cm. Sem problemas, troque de dispositivo e o 1px lógico é o tamanho real de 2,4 pixels. Ou seja, o tamanho do pixel de outro dispositivo é metade do seu dispositivo, então para ele, 10px é 24 pixels, mas o tamanho real ainda é 10cm, então, sob a premissa do conceito de pixels lógicos, px é um absoluto unidade de comprimento.

Pixel lógico: Pixel em CSS, uma unidade absoluta, garante que as dimensões dos elementos em diferentes dispositivos sejam as mesmas .
Pixel físico: o pixel real da tela do dispositivo, unidade relativa, o tamanho do pixel físico é diferente em diferentes dispositivos .

janela de visualização janela de visualização

Geralmente, os navegadores de dispositivos móveis definem uma meta tag viewport por padrão para definir uma viewport de layout virtual (layout viewport), que é usada para resolver o problema de exibição de páginas iniciais em telefones celulares. iOS e Android basicamente definem a resolução da viewport para 980px, então a página da web no PC pode basicamente ser renderizada no celular, mas os elementos parecem pequenos e a página da web pode ser ampliada manualmente por padrão.
Descrição da imagem

janela de visualização padrão

上面截图中的方块为100px，但是在iphone6设备的默认视口下显示的非常小，因为默认视口为980px。为了解决这个问题，可通过meta标签来修改视口的尺寸大小（vsCode工具初始创建HTML代码时，自动添加）。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
复制代码

width=device-width表示视口宽度为设备的宽，也就是逻辑像素的大小。initial-scale=1.0表示初始缩放比例为1，即正常大小。下面是设置了viewport视口后的样子。
Descrição da imagem

设置viewport

viewport可选的值有：

属性	值	描述
width	正整数或devive-width	定义视口的宽度，单位为像素
height	正整数	定义视口的高度，单位为像素，不常用
initial-scale	比例值	定义初始缩放值
minimum-scale	比例值	定义缩小最小比例
maximum-scale	比例值	定义放大最大比例
user-scalable	yes/on	定义是否允许用户手动缩放页面，默认值yes

总结：

在移动端布局中，一定要提前设置好视口大小，即vsCode默认添加形式，<meta name="viewport" content="width=device-width, initial-scale=1.0">，这样可以保证CSS逻辑像素不会受到缩放处理。

750像素设计稿

通常移动端UI设计稿会按照iphone6的物理像素尺寸大小进行设计，即750px。当然也可以按照逻辑像素进行设计，即375px，但是一般设计师不会这么干，主要为了设计稿更加清晰。

所以前端在量取尺寸的时候，需要除以2，才能适配页面中的CSS逻辑像素值 Descrição da imagem

那么如何让唯一的一种设计稿尺寸，去适配不同设备的像素呢？让页面元素能够等比进行放大缩小呢？可通过rem和vw这两种相对单位来进行实现

总结：

移动端UI设计稿尺寸大小为750px，即设备的物理像素，可使效果展示更加清晰。

移动端需要实现像素换算和设备适配，以及页面元素等比缩放布局等。

移动端rem布局原理

同一个页面在不同的设备下，如果页面中的元素都做成等大的，那么就会被拉伸、不成比例。如何让页面在不同的设备下整体上感觉大小是相同的呢？就需要等在小点的设备上等比缩小或者在大一点的设备上等比放大，如下图所示

所以就不能使用px作为单位因为它是固定单位，这就需要使用类似rem这样的相对单位，同一个rem值在不同的设备下换算出的px是不同的

em单位

1em = 当前容器下的font-size大小(默认16px)，如果一个div的font-size大小写的单位是em，那么它就会去找它的父元素的font-size 去换算成px

rem单位

1rem = 根节点html标签设置的font-size大小，同元素所在容器font-size无关、body容器的font-size无关

如果当前页面为在设备iphone6下的html的font-size为30px，页面在iPhone 6 plus 打开时如果可以动态的修改页面html下的font-size的大小,那么页面中所有使用rem作为尺寸单位的元素就可以跟着变化了，这样只要修改html下的font-size大小，就达到了一个页面在不同设备下的适配了

示例1

动态计算font-size

利用vw/vh相对单位，动态计算font-size

vw 和 vh

页面将可视区分成了100个vw和100个vh

如下图所示，将宽高设置成50vw和50vh，可见vw就是一个参照可视区域大小的相对单位

如何利用vw进行换算呢？

当在页面中设置样式,发现在不同设备尺寸下font-size的大小是在变化的

html{ font-size: 100vw; }

在iphone6设备下，为了方便最后转成rem更加容易，font-size不要设置成100vw(375px)，font-size设置的大小最好是让1rem = 100px，那么font-size 需要设置成多少个vw呢？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html{
      /* font-size: 100vw; iphone6 -> 375px */
      font-size: 26.666667vw; /* iphone6 -> 100px */
    }
    body{
      font-size: 0.16rem; /* 一定要在body重置字体大小 */
    }
    .box{
      width: 1rem; 
      height: 1rem;
      background: pink;
    }
  </style>
</head>
<body>
  <div class="box">
    哈哈
  </div>
</body>
</html>
复制代码

在iphone6设备下1rem = 100px

在iphone6 plus下1rem = 110.4px

这样就达到了动态的设置html的font-size的目的,也就间接的影响到了rem转成px的最终结果，也达到了依据不同的设备尺寸，等比的适配的结果

示例2

这样通过中间的媒介相对单位vw，在html中将font-size计算成了100px作为换算的值，也间接的将rem转成了100px，但是在使用rem作为单位的时候还是要再将设计稿中的px尺寸和rem做一层计算(px / 100 = rem),这样还是太麻烦了，有没有更好的办法？

测量rem数值及插件使用

vsCode工具中px to rem 插件

接着我们一次性将全部的单位写成px，最后全选按ALT + Z就可以一次将px转成rem单位了
在html中设置font-size大小

   html{
      font-size: 26.666667vw; /* iphone6 -> 100px */
    }
复制代码

如果拿到的是二倍稿，我们想要拿到一倍稿的尺寸，ps中量取的数值是物理像素，css中设置的是逻辑像素，所以量取的值进行除以2，然后再进行rem转换

建议最好使用pxcook导入psd(figma可以导出sketch文件再用工具转成psd文件)，可以先转成一倍稿的尺寸，再转成rem单位(基数设置100，取整改为三位数)

pxCook新建项目的时候选择web项目

总结

在iphone6 尺寸下设置html标签字体大小： font-size: 26.666667vw: 此时，1rem = 100px
在iphone6原型设计稿中量取尺寸(如果原型设计稿的宽度是750像素，量取的尺寸需要除以2,最后再将它转成rem)
在vsCode中使用px书写样式，最后使用vsCode工具中 px to rem 插件，选中所有样式，按快捷键Alt + Z，将px全部转成rem单位

移动端vw布局及插件使用

思路

如果是在iphone6的屏幕尺寸下(375px)，100vw = 375px,那么，1vw = 3.75px; 如果是在iphone6 plus屏幕尺寸下(414px),100vw = 414px，那么，1vw = 4.14px; 这样使用vw相对单位就可以实现页面在不同设备下的是等比缩放和适配，用起来比rem方便，它与font-size 无关

Então, como convertemos vw e px rapidamente?

Recomenda-se usar o plugin px-to-vw na ferramenta vsCode

Se você deseja converter o px sob o projeto de design duplo para vw, basta configurá-lo da seguinte maneira, selecionar todos os estilos e pressionar a tecla de atalho Alt + V para convertê-lo na unidade relativa de vw (a tecla de atalho pode ser definido por você mesmo)

Existe outro método: coloque o arquivo psd em pxcook, você pode converter px em valor vw

Layout de adaptação móvel