我们都知道移动端的显示,和pc端在不处理的情况显示不一样的,那么怎么才能进行适配呢?
1.媒体查询
@media and screen (@min-width:大于多大尺寸屏幕){
}
2.使用vm vh 单位 它是相当于视口大小,也就当前能看到的大小
3.rem进行 它是和body中font-size 大小于基准
4.大招
//拿到css像素和 物理像素的缩放比例
let scale=1 /window.devicePixelRatio;
//将上面的值插入到最大屏幕 最小屏幕
let text=`<meta name="viewport" content="width=device-width, initial-scale=${
scale},
maximum-scale=${
scale},minimum-
scale=${
scale},user-scalable=no">`
document.write(text); document.documentElement.style.fontSize=window.innerWidth/7.5+"px";
```这岂不是so easy too hapy 嘛!!!