CODEWITHSUNDEEP
reactjsresponsive-designmaterial-ui
Jasurbek Nabijonov
Jasurbek Nabijonov

Reputation: 1745

Convert Material UI app to mobile and make it responsive

I was building a web app with React and Material UI and I have difficulty with mobile size. So I have several questions:

  1. How to make margins responsive for example: marginLeft: theme.spacing(20), this is how I set up margin for logo example on desktop:enter image description here
    example mobile:
    enter image description here

Upvotes: 3

Views: 1063

Answers (2)

Fraction
Fraction

Reputation: 12964

You could use CSS Media Queries:

CSS media queries are the idiomatic approach to make your UI responsive. The theme provides four styles helpers to do so:

  • theme.breakpoints.up(key)
  • theme.breakpoints.down(key)
  • theme.breakpoints.only(key)
  • theme.breakpoints.between(start, end)

Default breakpoints:

Each breakpoint (a key) matches with a fixed screen width (a value):

  • xs, extra-small: 0px
  • sm, small: 600px
  • md, medium: 960px
  • lg, large: 1280px
  • xl, extra-large: 1920px

These breakpoint values are used to determine breakpoint ranges. A range starts from the breakpoint value inclusive, to the next breakpoint value exclusive:

value         |0px     600px    960px    1280px   1920px  
key           |xs      sm       md       lg       xl   
screen width  |--------|--------|--------|--------|-------->  
range         |   xs   |   sm   |   md   |   lg   |   xl

These values can be customized.

Example:

const useStyles = makeStyles(theme => ({
  myLogo: {
    // Match [md, ∞)
    //       [960px, ∞)
    [theme.breakpoints.up('md')]: {
      ...,
      marginLeft: theme.spacing(20),
      ...
    },
    // Match [0, sm + 1)
    //       [0, md)
    //       [0, 960px[
    [theme.breakpoints.down('sm')]: {
      ...,
      // no margin
    },
  }
}));

Upvotes: 2

Zeno Dalla Valle
Zeno Dalla Valle

Reputation: 919

I once had a similar problem in a project I was doing. I solved with react-device-detect. With this package you can set margin and layout in general based on device running your app.

import {
  BrowserView,
  MobileView,
  isBrowser,
  isMobile
} from "react-device-detect";

Then you can both generate two views

<BrowserView>
    <h1> This is rendered only in browser </h1>
</BrowserView>
<MobileView>
    <h1> This is rendered only on mobile </h1>
</MobileView>

Or use isMobile for conditional rendering.

Upvotes: 2

Related Questions