媒体查询适配PC/iPad/移动端

• 当浏览器窗口的宽度在768像素到1024像素之间（包括两端）,里面的CSS样式将被应用到对应的元素上。

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* 以上的查询条件适用iPad设备 */
  /* 添加针对iPad的CSS样式 */
}

• 当浏览器窗口的宽度在768像素到1024像素之间（包括两端），并且设备的方向为横向时，里面的CSS样式将被应用到对应的元素上。

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { 
//CSS 

}

• PC

@media only screen and (min-width: 1024px) {
 //css
}

• 根字号的设置

//useAgent.ts 判断用户当前使用的设备
export const os: any = function () {
  const ua = navigator.userAgent,
    isWindowsPhone = /(?:Windows Phone)/.test(ua),
    isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
    isAndroid = /(?:Android)/.test(ua),
    isFireFox = /(?:Firefox)/.test(ua),
    isChrome = /(?:Chrome|CriOS)/.test(ua),
    isTablet =
      /(?:iPad|PlayBook)/.test(ua) ||
      (isAndroid && !/(?:Mobile)/.test(ua)) ||
      (isFireFox && /(?:Tablet)/.test(ua)),
    isPhone = /(?:iPhone)/.test(ua) && !isTablet,
    isPc = !isPhone && !isAndroid && !isSymbian;
  return {
    isTablet: isTablet,
    isPhone: isPhone,
    isAndroid: isAndroid,
    isPc: isPc,
  };
};

//   if (os.isAndroid || os.isPhone) {
//     alert('手机');
//   } else if (os.isTablet) {
//     alert('平板');
//   } else if (os.isPc) {
//     alert('电脑');
//   }

//useFontSize.ts 根据用户使用的设备来配置根字号
import { os } from '@/utils/useAgent';
const DESIGN_W = 375; //设计稿宽度
export const setFontSize = () => {
  const agent = os();
  console.log('screen.width', screen.width);
  if (agent.isAndroid || agent.isPhone) {
    document.documentElement.style.fontSize = screen.width / DESIGN_W + 'px';
  } else {
    document.documentElement.style.fontSize = 1 + 'px';
  }
};

//在app.tsx中引入useRootFontSize并执行根字号的设置
import { setFontSize } from './utils/useRootFontSize';

setFontSize();