实现原理
首先需要了解一个概念：viewport 视口（mdn）。如果要实现浏览器适配移动端，首先我们要统一标准视口。在html的head中添加以下代码：
第一种：rem实现原理
rem是一个倍数单位，它是基于html的font-size的倍数。只要我们在不同的设备上设置一个合适的初始值，当设备发生变化font-size就会自动等比适配大小，从而在不同的设备上表现统一。
比如说：移动端设计稿一般会以750px进行交付，而手机实际像素可能是375px。那么一般我们会以设备宽度的1/10作为初试html的font-size大小，当然这个值是动态的，在不同设备上得到的值不同。
比如有的设备宽度是375px，那么html初始font-size就是37.5px，如果设备宽度是300px，那么font-size就是30px。 因为内容都是rem基于font-size的倍数，所以不同宽度的设备上都是等比显示的。
注意：这个font-size基数到底是不是设备的1/10是没有统一论调的，你可以用1/n任意定义。关键是理解rem适配的原理是元素等比缩放。
参照具体代码：
<!DOCTYPE html>
至于px如何转换为rem，在vscode中可以搜索相关插件。
第二种： 媒体监听
媒体监听通过@media实现。注意：媒体监听不是等比缩放！！！是同一块内容在不同设备上有合理的表现。
比如在PC端一行能同时展示4个元素块，而在移动端只能一行展示1个或者2个元素块(要不看不清)。
那么就可以通过监听媒体宽度，给元素设置不同的宽度，从而有合理的表现。
代码参考：
<!DOCTYPE html>
