Joshua Rajandiran Joshua Rajandiran - 1 year ago 95
React JSX Question

How do I make my React Components to be responsive via css media queries?

I have this site that I'm currently trying to convert into react with css media query for phone & tablet.

The problem I just encountered is that the css for the

media query
doesn't get read or simply doesn't work in React.

Any solution for this? Thanks

Answer Source

Media queries has nothing to do with React, as long as you don't use inline CSS because at the end react outputs HTML and media queries works perfect.

I built entire front-end in react and made it pure responsive. Also i used only 1% css as inline and am using two frameworks 1. Semantic-ui 2. Flexbox Grid

along with below media queries ( written less variables).

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";
@mobile:      ~"only screen and (max-width: 529px)";
@tablet:      ~"only screen and (min-width: 530px) and (max-width: 949px)";
@desktop:     ~"only screen and (min-width: 950px) and (max-width: 1128px)";
@desktop-xl:  ~"only screen and (min-width: 1129px)";
@desktop-above: ~"only screen and (min-width: 950px)";
@tablet-above: ~"only screen and (min-width: 530px)";
@mobile-above: ~"only screen and (min-width: 320px)";