屏幕适配

同学你好，px是css中的像素单位，正常情况下，如果给一个元素设置50px的高度，不管是在PC端还是移动端，高度都是50px，不会发生变化，所代表的含义也一样，如图

为了能够让网页在移动端正常显示，需要设置viewport，如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

表示将视口宽度设为设备的实际宽度，并且将网页大小按照1:1的比例缩小（初始缩放比initial-scale为1）。此时，元素只是视觉上缩小了而已，实际上高度还是50px。

在设备像素比（dpr）相同的设备中，1个css像素所代表的物理像素是相同的。如果设备像素比发生变化，正常情况下不会影响网页大小，因为网页大小是以css像素为准，而不是以物理像素为准。

在实现移动端屏幕适配时，此处视频中的元素高度，不可以写成固定的50px，如果写成50px，不管在多大的屏幕尺寸下，高度都是50px。而实际情况是，在375px宽的屏幕下高度为50px；在750px宽的屏幕下，高度为100px。

所以，实现屏幕适配使用rem单位，而不是使用px单位设置成固定值。

祝学习愉快！