VW适配

VW适配（不使用JS）

viewport 设置:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">

不同设备完美视口的大小是不一样的

iphone6 -- 375

iphone6plus -- 414

由于不同设备视口和像素比不同，所以同样的375个像素在不同设备下的意义是不一样的，比如在iphone6中375就是全屏，而到了plus中375就会缺一块。

所以在移动端开发时，就不能再使用px来进行布局了

VW表示的是视口的宽度(viewport width)

100vw = 一个视口的宽度

1vw = 1%视口的宽度

vw这个单位永远相当于视口宽度进行计算

设计图的宽度

​ 750px 或 1125px

使用vw作为单位

​ 100vw

设计图中 一个 48px*35px大小的元素

box1{
    width:48px;
	height:35px;
}

100vw = 750px(设计图的像素)

0.13333333333333333333vw = 1px

box1{
    width:6.4vw;
	height:4.667vw;
}

VW适配

1 rem= 1 html的字体大小

网页中字体大小最小是12px，不能设置比12像素还小的字体，如果设置了一个小于12px的字体，则字体自动设置为12

所以别想着 设置 font-size:0.13333 vw；然后1 rem = 1px（设计图）

但是你可以 设置font-size:5.3333 vw; 然后1 rem = 40 px(设计图)

html{
	font-size:5.3333vw
}
box1{
	width:1.2rem;
	height:0.875rem;
}

或者更直接 设置font-size:13.333vw; 然后1 rem = 100px(设计图)

html{
	font-size:13.333vw
}
box1{
	width:0.48rem;
	height:0.35rem;
}

vw 适配如何换算元素大小呢？使用公式：（元素大小 / 设计稿大小）* 100vw 将元素大小转换为 vw 单位的大小。以常用的 750px 设计稿尺寸为例，假设设计稿的某个字体大小是 40px，换算成 vw 单位大小应该为 （40 / 750）* 100vw = 5.33333vw。可以选择使用构建工具postcss-px-to-viewport简化工作流程。

rem适配

rem 适配是缩放处理设计思想的典型代表。rem 是一个相对单位，它永远相对于根元素（html）的字体大小，这个特性方便了统一管理元素的大小，非常适合用来处理布局。

viewport设置（与vw相同）：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">

如何合理设置 rem 的大小呢？通常将页面宽度进行 10 等分，即：

const rem = document.documentElement.clientWidth / 10

这样，rem 的大小完全是随屏幕正比变化，就能根据设计稿尺寸换算页面元素和字体的大小。以常用的 750px 设计稿尺寸为例，假设设计稿的某个字体大小是 40px，换算成 rem 应该为 40 / 75 = 0.53333rem。当然这样计算很麻烦，可以选择使用构建工具postcss-pxtorem简化这些工作。

注意：并非所有单位都需要转换成 rem，通常只对需要等比缩放的元素进行 rem 换算，对于不需要缩放的元素，比如边框阴影，使用 px 等其他单位。实际开发中，应该以 rem 单位为基础，同时结合其他单位协同工作。