How to handle Mobile screens

Question

I'm currently working with React for building a cross-platform. I do want to know whether there is better approach for react project structure.

here is my approach, my codes are spitted into two parts (web and Mobile).

Here is my sample react structure and react routing(routes.tsx) Pattern.

React folder structure

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 />,
    }),

I thought this would be a nice approach.

but every time I code my react project, I have to make two JS file and two CSS file for Web and Mobile. It does not look like efficiency anymore.

Is there any good approach for handling web and mobile screen? Something like handling them together in one JS file and one css file.

Answer 1

You have to use media queries in CSS and customize your page so that it is responsive to all screen sizes.

Refer this answer for understanding the media queries in CSS.

And for more info refer here

Answer 2

You can use css media queries https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries in one css file like

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