Styled components: apply all ios media queries

New to UI so excuse the noob question, but I wanted to add media queries for all the iOS screen dimensions in my React app that uses styled components. Because I have multiple components, explicitly stating each rule seems really verbose. Is there a better / more elegant way to do this?

For example, I have something like this for each component

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

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

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

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

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

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