The @media Rule

Screen Sizes (pixels per grid) For Bootstrap:

  • X-Small: x < 576px
  • Small: 576px - 768px
  • Medium: 768px - 992px
  • Large: 992px - 1200px
  • X-Large: x > 1200px

Notes:

  • It can be used with id(s), class(s), and element(s)
  • Can be used to hide elements (display: none;)
  • You can have multiple @media(s) in SCSS

Examples

Max-Width

<style> body { background-color: #C9C9C9; } @media only screen and (max-width: 600px) { body { background-color: #5FACDE; } } </style>

Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "gray".

Min-Width

<style> #fontChange { color: #B52534; } @media only screen and (min-width: 800px) } </style>

Resize the browser window. When the width of this document is 800 pixels or more, the header above font color is "red", otherwise on small screens it's "yellow".

Multiple Changes

<style> .subTitles { color: #FF80FF; } div.example { background-color: yellow; padding: 20px; } @media only screen and (min-width: 900px) { .subTitles { color: #59FF59; } div.example { display: none; } } </style>

Resize the browser window. When the width of this document is 900 pixels or less, H3 tags change color and the div below appears.

Example DIV.

In-Between Widths

<style> div.example2 { background: #5A59FF; border: 4px solid #8D5CD8; } @media screen and (min-width: 768px) and (max-width: 1024px) { div.example2 { background: #FF8F46; border: 8px dashed #B6FF46; } } </style>

Resize the browser window. When the width of this document is between 768px - 1024px, div below background and border change.

Example2 DIV.