Tablet

Arguments

NameTypeDescription
$devicestring

Accepts the name of a tablet model. Predefined values are iPadMini, iPad, iPadAir, iPadPro, Nexus7, Nexus9, Nexus10.

$orientationstring

Accepts two values: portrait or landscape. The default value is set to portrait.

* The string values can be pass with or without the quotation marks.

Examples

First, call the mixin and pass only one value for the $device model name. Unless you pass a value for $orientation, it will be portrait.

.element {
  @include tablet(iPad) {
    background-color: teal;
  }
}
//CSS Output
@media only screen and (device-width: 810px) and (device-height: 1080px) and (orientation: portrait) {
  .element {
    background-color: teal;
  }
}

Now, let’s try to pass two arguments: one for the name of the $device model, the other is for the $orientation.

.element {
  @include tablet(Nexus10, landscape) {
    background-color: teal;
  }
}
//CSS Output
@media only screen and (device-width: 1280px) and (device-height: 800px) and (orientation: landscape) {
  .element {
    background-color: teal;
  }
}