Media Queries

CSS3 media queries use the @media at-rule, media type, and expressions that evaluate to true or false to define the cases for which the corresponding style rules will be applied. Media queries form the basis for Oracle JET’s responsive classes.

<style>
@media media_types (expression){
  /* media-specific rules */
}
</style>

The CSS3 specification defines several media types, but specific browsers may not implement all media types. The media type is optional and applies to all types if not specified. The following media query will display a sidebar only when the screen is wider than 767 pixels.

@media (max-width: 767px){
 .facet_sidebar {
    display: none;
  }
} 

Oracle JET defines CSS3 media queries for the screen widths listed in the following table.

Width Default Range in Pixels Device Examples

small

0-767

phones

medium

768-1023

tablet portrait

large

1024-1280

tablet landscape, desktop

extra large

1281+

large desktop

Note:

For printing, Oracle JET uses the large screen layout for printing in landscape mode and the medium screen layout for printing in portrait mode.

Oracle JET's size defaults and media queries are defined in the Sass variables contained in site_root/scss/oj/vx.x.x/common/_oj.common.variables.scss and are used in the grid, form, and responsive helper style classes. The following code sample shows the responsive screen width variables and a subset of the responsive media queries. In most cases the defaults are sufficient, but be sure to check the file for additional comments that show how you might modify the variables for your application if needed.

// responsive screen widths
$screenSmallRange:  0, 767px !default;
$screenMediumRange: 768px, 1023px !default;
$screenLargeRange:  1024px, 1280px !default;
$screenXlargeRange: 1281px, null !default;

// responsive media queries
$responsiveQuerySmallUp:    "print, screen" !default;
$responsiveQuerySmallOnly:  "screen and (max-width: #{upper-bound($screenSmallRange)})" !default;

$responsiveQueryMediumUp:   "print, screen and (min-width: #{lower-bound($screenMediumRange)})" !default;
$responsiveQueryMediumOnly: "print and (orientation: portrait), screen and (min-width: #{lower-bound($screenMediumRange)}) and (max-width: #{upper-bound($screenMediumRange)})" !default;
$responsiveQueryMediumDown: "print and (orientation: portrait), screen and (max-width: #{upper-bound($screenMediumRange)})" !default;

$responsiveQueryLargeUp:    "print and (orientation: landscape), screen and (min-width: #{lower-bound($screenLargeRange)})" !default;
$responsiveQueryLargeOnly:  "print and (orientation: landscape), screen and (min-width: #{lower-bound($screenLargeRange)}) and (max-width: #{upper-bound($screenLargeRange)})" !default;
$responsiveQueryLargeDown:  "print and (orientation: landscape), screen and (max-width: #{upper-bound($screenLargeRange)})" !default;

$responsiveQueryXlargeUp:   "screen and (min-width: #{lower-bound($screenXlargeRange)})" !default;
$responsiveQueryXlargeOnly: null !default;
$responsiveQueryXlargeDown: null !default;

$responsiveQueryXXlargeUp:  null !default;

$responsiveQueryPrint:      null !default;

Responsive media queries are based on the screen widths defined in the $screen{size}Range variables and a range qualifier. For example:

  • $responsiveQuerySmallUp applies to all screens in the $screenSmallRange or wider.

  • $responsiveQuerySmallOnly applies only to screens in the $screenSmallRange.

  • $responsiveQueryXlargeDown applies to all screens in the $screenXlargeRange and narrower.

For additional information about Oracle JET’s use of Sass and theming, see Theming Applications.

For additional information about CSS3 media queries, see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries and http://www.w3.org/TR/css3-mediaqueries.