Afin d'adapter la page aux appareils avec différentes résolutions, les unités fixes ne peuvent pas être utilisées, et les unités relatives rem et vw doivent être utilisées pour contrôler dynamiquement la taille de la page

Pixels logiques vs pixels physiques

Le nom complet de px est pixel, longueur de pixel, longueur de pixel, donc je voudrais demander, est-ce que la taille de pixel d'un super grand écran est la même que la taille de pixel de l'écran de votre ordinateur portable ou de votre téléphone portable ? C'est-à-dire que la longueur de 1px affichée sur l'écran de votre téléphone portable peut être de 0,1 mm, et la longueur sur l'écran électronique d'une performance en plein air est de 5 cm, alors 0,1 mm et 5 cm sont-ils égaux ?

On dirait que px est une unité relative, mais s'il est placé aux yeux d'une page Web ou d'un concepteur, ce n'est peut-être pas nécessairement vrai. L'exemple ci-dessus est un pixel physique. Dans le contexte des pixels physiques, px est en effet un unité relative, mais en logique, les pixels sont différents. 1px en css fait référence aux pixels logiques. Le navigateur convertira vos pixels logiques en pixels physiques. Bien que la taille des pixels physiques soit différente entre chaque appareil, après avoir utilisé l'unité de pixels logiques, le l'affichage aura la même longueur.

Lors du développement d'une page Web, j'ai écrit 10 pixels. Sur votre appareil, le 1 pixel logique correspond à la taille réelle de 1,2 pixel, mais il semble en réalité 10 cm. Pas de problème, changez d'appareil et le 1 pixel logique correspond à la taille réelle de 2,4 pixels. C'est-à-dire que la taille des pixels d'un autre appareil est la moitié de votre appareil, donc pour lui, 10px est de 24 pixels, mais la taille réelle est toujours de 10cm, donc, sous le principe du concept de pixels logiques, px est un absolu unité de longueur.

Pixel logique : le pixel dans CSS, une unité absolue, garantit que les dimensions des éléments sur différents appareils sont les mêmes .
Pixel physique : le pixel réel de l'écran de l'appareil, unité relative, la taille du pixel physique est différente selon les appareils .

fenêtre d'affichage

Généralement, les navigateurs des appareils mobiles définissent par défaut une balise meta viewport pour définir une fenêtre de mise en page virtuelle (layout viewport), qui est utilisée pour résoudre le problème d'affichage des premières pages sur les téléphones mobiles. iOS et Android définissent essentiellement la résolution de la fenêtre d'affichage sur 980px, de sorte que la page Web sur le PC peut être rendue sur le téléphone mobile, mais les éléments semblent petits et la page Web peut être zoomée manuellement par défaut par défaut.
description de l'image

fenêtre par défaut

上面截图中的方块为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视口后的样子。
description de l'image

设置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逻辑像素值 description de l'image

那么如何让唯一的一种设计稿尺寸，去适配不同设备的像素呢？让页面元素能够等比进行放大缩小呢？可通过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 无关

Alors, comment convertir vw et px rapidement ?

Il est recommandé d'utiliser le plugin px-to-vw dans l'outil vsCode

Si vous souhaitez convertir le px sous le double brouillon de conception en vw, il vous suffit de le définir comme suit, de sélectionner tous les styles et d'appuyer sur la touche de raccourci Alt + V pour le convertir dans l'unité relative de vw (la touche de raccourci peut être réglé par vous-même)

Il existe une autre méthode : mettre le fichier psd dans pxcook, vous pouvez convertir px en valeur vw

Disposition d'adaptation mobile