屏幕适配方案

适配核心–等比

概念回顾
视口理解:布局视口,视觉视口,理想视口

1.viewport适配

步骤<meta name = "viewport " content="width=设计稿宽度"/>
例如
设计稿宽度为375
<meta name = "viewport" content="width=375"/>，然后按照设计稿做就行了
这样布局视口就一直是375
优点：
	不需要复杂计算，按照设计稿标注做即可
缺点：
	不能使用完整的meta标签，会导致安卓手机出现严重兼容问题
	导致强制适配。比如不需要边框加入适配

2.rem适配

em和rem是css中的相对单位
em是相对父级字体大小
rem是相对根元素字体大小
rem适配原理，编写时统一使用rem为单位，在不同设备上动态调整根字体大小
一般设置根字体为100px
其他屏幕的根字体大小 = 100/设计稿宽度 * 其他屏幕横向的设备独立像素
(即宽度 document.documentElement.clientWidth,
 因为开启了viewport形成理想视口，所以布局视口等于它)
设置根字体大小document.documentElement.style.fontSize = v + 'px'

// 使用例子,设计稿宽度为375
function foo() {
	const dip = document.documentElement.clientWidth
	const rootFontSize = (dip*100)/375
	document.documentElement.style.fontSize = rootFontSize + 'px'
}
foo()
window.onresize = foo

.b {
	width: 10rem;
	height: 5rem;
}
<div class="b"></div>

3.vw适配

vw和vh是两个相对单位
vw=布局视口宽度的1%

假设设计稿宽度为1000
.b {
	width: 10vw;
	height: 10vw;
}
这样，如果变化窗口，b也一直会保持在窗口中的比例
<div class="b"></div>