如何处理移动屏幕

Question

我目前正在与React合作构建一个跨平台。我确实想知道是否有更好的方法来应对项目结构。

这是我的方法，我的代码分为两部分(web和Mobile(。

这是我的示例react结构和react路由(routes.tsx(模式。

React文件夹结构

const routes: () => RouteConfig[] = () => [
{
id: 1,
path: PATH.DEFAULT,
exact: true,
public: true,
component: Loadable({
loader: async () => {
await checkVersion();
const { config } = store.getState();
if (config.viewType === VIEW_TYPE.MOBILE) { // if it is a mobile User
return import(/* webpackChunkName: "MobileMain" */ './mobile/Main');
} //For PC User
return import(/* webpackChunkName: "Main" */ './www/Main');
},
loading: () => <PageLoading />,
}),

我认为这将是一个不错的方法。

但每次我编写react项目的代码时，我都必须为Web和Mobile制作两个JS文件和两个CSS文件。它看起来不再是效率。

有什么好的方法来处理网络和移动屏幕吗？类似于在一个JS文件和一个css文件中一起处理它们。

Answer 1

您必须在CSS中使用媒体查询，并自定义页面，使其能够响应所有屏幕大小。

请参阅此答案以了解CSS中的媒体查询。

有关更多信息，请参阅此处

Answer 2

您可以使用css媒体查询https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries在一个css文件中，如

@media (min-width: 1023px) { div { color: black} }