使用React开发网站如何实现移动端友好？有哪些适配方案？

是否需要编写专门的CSS实现适配 #

• 是，移动端适配的核心就是针对不同尺寸的设备视口调整布局、字体、交互元素的样式，必须编写对应的CSS规则才能实现。
• 你使用%单位不生效，大概率是没有配置基础的viewport元标签，请先在项目public/index.html的<head>标签内添加如下配置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

该配置会强制让页面渲染宽度等于设备的实际物理宽度，%、vw这类相对单位才会以设备尺寸为基准计算，否则浏览器会默认用980px的虚拟视口渲染页面，自然达不到适配效果。

• 适配单位建议组合使用，不要仅依赖%：
  • 全局布局尺寸优先用vw/rem，组件内间距、字体大小用em/rem
  • 布局优先选择Flex、Grid弹性布局，比传统浮动布局更易适配不同尺寸
  • 通过@media媒体查询针对常用断点调整布局逻辑，比如768px以下（平板、手机端）把多列布局改成单列，隐藏非核心的侧边栏、导航元素等，常用断点可参考：360px（小屏手机）、768px（平板竖屏）、1200px（桌面端）

是否需要单独编写移动端专属的.js和.css文件 #

• 绝大多数场景不需要全量单独编写，同一套代码配合CSS媒体查询、JS视口判断就可以实现适配，不会产生过多冗余代码。
• 仅当移动端和桌面端的页面结构、交互逻辑差异极大时，才考虑拆分组件：比如同一页面桌面端是复杂表格展示，移动端是卡片流展示，你可以把两种视图封装为独立组件，在父组件中监听视口变化动态渲染对应组件即可，不需要拆分全站的js和css文件。
• React生态有很多成熟工具可以简化适配逻辑：比如用styled-components、emotion这类CSS-in-JS方案可以直接在样式代码中写入断点逻辑，也可以用响应式钩子快速获取当前视口状态，无需自己编写重复的视口监听代码。

内容的提问来源于stack exchange，提问作者Memo