Saturday, September 24, 2022
HomeiOS Developmentcss - Styled parts: apply all ios media queries

css – Styled parts: apply all ios media queries


New to UI so excuse the noob query, however I needed so as to add media queries for all of the iOS display dimensions in my React app that makes use of styled parts. As a result of I’ve a number of parts, explicitly stating every rule appears actually verbose. Is there a greater / extra elegant manner to do that?

For instance, I’ve one thing like this for every element

  @media solely display
  and (device-width: 375px)
  and (device-height: 812px)
  and (-webkit-device-pixel-ratio: 3) {
    width: 300px;
  }

  @media solely display
  and (device-width: 390px)
  and (device-height: 844px)
  and (-webkit-device-pixel-ratio: 3) {
    width: 300px;
  }

  @media solely display
  and (device-width: 428px)
  and (device-height: 926px)
  and (-webkit-device-pixel-ratio: 3) {
    width: 300px;
  }

  @media solely display
  and (device-width: 414px)
  and (device-height: 896px)
  and (-webkit-device-pixel-ratio: 2) {
    width: 300px;
  }

  @media solely display
  and (device-width: 414px)
  and (device-height: 896px)
  and (-webkit-device-pixel-ratio: 2) {
    width: 300px;
  }

  @media solely display
  and (device-width: 414px)
  and (device-height: 896px)
  and (-webkit-device-pixel-ratio: 3) {
    width: 300px;
  }

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments