How to render different components based off device size?
Asked Answered
S

5

21

I'm looking to build a responsive app that has a break point at 1024. When a user logs in/signs up, there will be a few questions to be answered.

On mobile, this will be rendered as one question on the screen at a time. The user will then see a sliding transition screen moving them to the next question.

Once the break point is exceeded, all questions will be rendered on the screen simultaneously.

Does anyone know if there are any styling frameworks that work with something like this, or any work-arounds for a conditional render based off pixel width?

This will be a React based app. Currently using foundation for the styling.

Scrope answered 18/12, 2017 at 20:43 Comment(0)
M
29

You can use CSS media queries that set display: none to create breakpoints for different sizes. Or you can use the React Responsive library to render React Components based on media queries.

css Media Query example (insert this into a .css file and include it into your app):

//Any device with className .loginFeature below 1024px will not be displayed
@media (max-width: 1024px) {
  .loginFeature:{
    display: none;
  }
}

React Responsive Example:

<MediaQuery query="(max-device-width: 1024px)">
  //Insert any components/html here that you want rendered thats below 1024px
</MediaQuery>
Mittel answered 18/12, 2017 at 20:48 Comment(4)
Also, there are a couple UI-frameworks that have built in Grid Layouts that make rendering components responsively easier such as React-Bootstrap and Semantic-ui-react. react-bootstrap.github.io react.semantic-ui.com/introductionMittel
Thanks MEnf, I'm looking into the React Responsive example now. I was originally thinking about dealing with a switch case and rendering out different components depending on the device size. Using this example, it seems like I can avoid that and just include the query=() to render accordingly. Does that sound right to you?Scrope
Yes sir! One thing to remember however is that these are just break points. If a user is on the computer, they can just adjust their screen size by simply resizing their brower window or using dev tools. So try to take that into account when designing around mobile/tablet/computer devices.Mittel
If you're looking to target mobile/tablet you usually need to target operating systems rather than breakpoints. Check this thread for an example: #6667407Mittel
P
9

For your react project check out react-responsive. Use it to import a component called MediaQuery. MediaQuery will only render its child components when the conditions you set for it are met.

To Install:

yarn add react-responsive

Add this line to your project to import MediaQuery:

import MediaQuery from "react-responsive";

Then use MediaQuery to conditionally render your content or in your case questions:

<MediaQuery query=(min-width: 1024px)>
    <div className="question">
        ...
    </div>
</MediaQuery>

You can find more information about react-responsive here.

Pentaprism answered 4/7, 2018 at 18:30 Comment(0)
F
5

If you are using Material UI in your react app as a styling library, then it's possible doing this through two methods.

So, before I explain the methods, I'll just quickly explain the 6 terms that are foundational in styling responsive designs using Material UI

They are - xs,sm,md,lg,xl as the name suggests, xs - xtra small, sm - small, md - medium, lg - large and xl - xtra large, these are just breakpoint variables for device sizes.

Ranging from 0 - 1920px, where each breakpoint represents values less than it's absolute value.

So, sm = 600px, then it means all devices from 0 - 600 are in the sm category and this concept is applied to other breakpoint variables. Check this out

So, you can use it in a Grid, or a Container, and it will adapt accordingly. You can use it in styling, a Material UIi component as well. For eg -

const styles = (theme) => ({
  root: {
    padding: theme.spacing(1),
    [theme.breakpoints.down('md')]: {
      backgroundColor: theme.palette.secondary.main,
    },
    [theme.breakpoints.up('md')]: {
      backgroundColor: theme.palette.primary.main,
    },
    [theme.breakpoints.up('lg')]: {
      backgroundColor: green[500],
    },
  },
});

So, all the sizes which are from xs to md will have the secondary color, and from md to lg will have primary color and device sizes above lg will have the green color.

You can play around and do this for number of conditional styles to achieve responsive designs.

If you want to render a completely different component, then you can use the useMediaQuery hook that Material UI provides.

For eg -

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up('sm'));

  return <span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>;
}

Here, if the device sizes, match the breakpoints from sm - xl, then the matches constant will be true and if less than sm, it'll be false.

The hook return a boolean value, for a breakpoint we pass it.

All, in all I find these two simple methods, really powerful for designing responsive screens.

Fann answered 21/2, 2022 at 18:44 Comment(0)
M
0

Have you taken a look at bootstrap? There are react libraries for both bootstrap 4: https://reactstrap.github.io/ and bootstrap 3: https://react-bootstrap.github.io/

Meaganmeager answered 18/12, 2017 at 20:47 Comment(1)
Thanks brub! I will check that out now.Scrope
E
-1

For Desktops

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

For Mobiles & Tablets

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
Extrorse answered 28/12, 2017 at 6:32 Comment(1)
This is not really helpful, since the question wasn't asking how to hide/show content in media queries... but rather render completely different components based on specific conditions.Poach

© 2022 - 2024 — McMap. All rights reserved.