移动端开发

建议

• 引用reset.less 重置、统一页面样式
• 引用varibale.less 设置默认、统一样式 比如

// 字体颜色
@font-100: #324057;
@font-200: #475669;
@font-300: #5e6d82;
@font-400: #8492a6;
@font-500: #99a9bf;
@font-600: #c0ccda;

• 单页应用所有路由都添加路由守卫，比如设置默认的微信分享内容
• 在config设置每个环境的默认配置
• axios在全局封装好
• 添加eslint
• 使用prettier

单页应用项目

技术栈是react+react-dom+reset-css+axios+umi+antd-mobile

  <script type="text/javascript">
    function setFontSize() {
      var clientWidth = window.innerWidth || document.body.clientWidth || 375;
      clientWidth = clientWidth < 480 ? clientWidth : 480;
      var fontSize = (clientWidth / 375) * 16;
      document.querySelector("html").style.fontSize = fontSize + "px";
    }
    window.addEventListener("resize", setFontSize);
    window.addEventListener("orientationchange", setFontSize);
    setFontSize();
  </script>

因为是移动端应用，考虑适配问题，所以宽度最宽为480px

iPad Pro 12.9-inch(1024x1366 | Dpr:2)

iPhone XS Max(414x896 | Dpr:3)

Windows(480x800 | Dpr:2)

多页应用项目

技术栈是react+react-dom+reset-css+axios+antd+antd-mobile+less