移动端适配注意事项

一、图片的展示，由于各个手机的像素不一致、导致图片为1倍图的话会比较模模糊、建议使用2至3倍图。
例如：宽高100X100,则使用200X200
二、移动端布局建议使用Flex布局进行适配。
三、使用zoom进行手机端页面大小动态适配，对页面进行缩放。

// 首先我们要动态适配，需要绑定 window.onresize 事件，监听窗口的变化。
// 1.构写缩放函数
const calculateZoom= () => {
     // document.body.clientWidth / 375 拿到缩放比，设置页面的zoom，375是设计图的宽度，可根据情况自行调整
      setZoom(document.body.clientWidth / 375);
};
// 2.react生命周期调用该方法,vue项目可替换相关生命周期
 useEffect(() => {
        calculateZoom();  // 进入页面调用一次
        window.onresize = () => { // 监听窗口变化、计算缩放比
            calculateZoom();
        };
 }, [])
// 3.设置当前页zoom缩放，或者全局，根据项目需求自行决定
 <div style={{ zoom: zoom }}></div>
// 4.当适配完毕后，如设计宽高为375，在web端会相关放大，可通知媒体查询，强制设置为宽375、zoom为1
@media only screen and (min-width: 750px) {}   // 750px~无线大