移动端的适配问题

我们都知道移动端的显示,和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 嘛!!!

猜你喜欢

转载自blog.csdn.net/weixin_45932463/article/details/106081985