H5页面样式兼容微信/钉钉直接打开/主流浏览器/移动端/PC端

1、通过vw和rem结合，动态适配屏幕，计算高度(设计图为750px)。

    750px = 100vw（屏幕100vw==设计图的尺寸：750px）
　　1px = 100 / 750 = 0.133333333333333vw
　　100px = 0.133333333333333vw *100px = 13.33333333vw
　　rem的 值是根据 跟根节点的字体大小来计算的，设置根节点的字体大小为100px，是为了方便计算
　　最终于得出：
　　 100px = 1rem=13.33333333vw

在根据UI设计图时，将单位换算/100

这样就会将移动端的自适应计算尺寸，但是这样兼容PC端需要结合media媒体查询，进行缩放既可以实现PC端兼容。

 @media screen and (min-width:900px){
	 html{
		 transform: scale(0.3); //根据实际进行缩放
		 transform-origin: 50% 0px 0px;  //为了防止缩放距离浏览器顶部留白，设置基点位置
	 }
 }
```![在这里插入图片描述](https://img-blog.csdnimg.cn/1d6c9cc32949409a806facf37bcd09db.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA57qi5ZmU5ZmU,size_20,color_FFFFFF,t_70,g_se,x_16)

这样就可以实现PC端和移动端适配啦！