Media Queries

Ipad Pro Media queries

@mixin ipadPro {
  @media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
    @content;
  }
}

@mixin ipadProLandscape {
  @media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) and (hover: none) {
    @content;
  }
}

Ipad Media queries

@mixin ipad {
  @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) and (hover: none) {
    @content;
  }
}
@mixin ipadLandscape {
  @media all and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) and (hover: none) {
    @content;
  }
}

Usage

@include ipad {
  font-size: 25px;
}

@include ipadPro {
  font-size: 25px;
}

Last updated