这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
通过阅读文章首先了解到目前主流的大屏适配方案为如下几种：
vw vh转换：将px按比例转换成vw和vh，可以让你的网页在不同大小的设备上保持一致的外观。只需要定义一次就可以自动调整元素的大。scale等比缩放: 这是一种可以让你缩放元素的方法，它可以让你以比例缩放元素，而不会改变它们的原始大小。这个方法特别适合用于确保图像看起来在不同大小的设备上完全一致。rem+vw vh：将rem和vw vh结合起来可以更好地控制网页中的元素，通过指定元素的大小单位来更精确地控制布局，并且可以使网页在不同大小的设备上更加响应式，减少布局的自适应代码。
vw vh 转换
实现思路
首先，需要确定设计稿的尺寸，这是实现vw/vh转换的基础。然后，计算比例关系，即每个px对应多少vw/vh。最后，根据比例关系，把px按比例转换为vw/vh单位，完成vw/vh的转换。
转换公式
按照设计稿尺寸将对应width和height设定为100vw和100vh
例如设计稿尺寸为 1920*1080，对于一个知晓width和height对应px的div来说
计算公式为
vw =( div’s width / 1920px ) * 100vw
vh = ( div’s height / 1080px ) * 100vh
scale 等比缩放
scale方法的应用很简单，只需要在元素中添加transform:scale()样式即可，例如：transform:scale(0.5)，即可将元素缩小50%。另外，transform:scale()还可以让元素按比例缩放，只需要指定两个参数：scaleX和scaleY，例如：transform:scale(0.5,0.75)，即可将元素横向缩小50%，纵向缩小75%。
但对于具体的实现思路需要按照以下公式
屏幕宽高比 < 设计稿宽高比时，scale（屏幕宽度 / 设计稿宽度）
屏幕宽高比 > 设计稿宽高比时，scale（屏幕高度 / 设计稿高度）
rem + vw vh
rem + vw vh 方案来实现网页的自适应布局，只需要把所有的px单位换成rem单位，然后再使用vw和vh来设置元素的尺寸即可。
注： 在使用rem + vw vh方案的时候，不可忽视rem的定义，它必须要在网页的最外层设置，以确保网页中所有元素都使用相同的rem值，这样才能使网页在不同分辨率下保持一致的布局和外观，避免因为使用不同的rem值而出现的网页布局混乱的问题。
