How to use Media query syntax for Reactjs

Question

I am working in react js project in which I want to distinguish between Medium Screens OR Big Screen OR Small Screen using the below breakpoints

// Small
@media (max-width: 575px) {}

// Medium
@media (max-width: 990px) {}

// Big
@media {}

Can anyone help by updating this pseudocode https://stackblitz.com/edit/react-cu8xqj?file=src%2FApp.js

fibbz · Accepted Answer · 2022-07-11 17:50:36Z

1

I use stylesheets for resposiveness - specifically the preprocessor Sass. Has a React package and everything. If this works for you, you can use a simple mixins file and import it in any other scss files you might be working in.

In your mixins.scss file:

@mixin tablet {
  @media (min-width: 768px) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: 1280px) {
    @content;
  }
}

And then in any other SCSS files where you want to use those breakpoints:

@use "../../styles/partials/mixins" as *;

.class {
   @include desktop {
     display: flex;
   }
}

This won't be applicable if you are trying to execute JS code upon changing breakpoints. I have an example of that I can dig up if need be.

answered Jul 11, 2022 at 17:50

fibbz

669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use Media query syntax for Reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related