Media Queries

Posted by admin at March 22, 2020

Media Queries

Media queries are simple filters that you can apply to CSS styles, which enables you to create a responsive experience. A key concept behind responsive design is fluidity and proportionality, as opposed to fixed-width layouts. In the following example we will use a media query to target devices with a screen width of 768 pixels or wider:

//CSS to hide mobile toggle button for desktop device
@media screen and (min-width: 768px) {
    .btn-mobile-toggle {
        display: none;
    }
}

Media queries tailor a website’s content presentation to a specific range of output devices, without changing the content itself. Also, media queries make it easy to change styles, based on the characteristics of the device rendering the content.

media query idea - Media Queries

Media queries look at the capability of the device, and check the:

  • Width and height of the viewport
  • Width and height of the device
  • Page orientation
  • Resolution

A media query consists of a media type and zero or more expressions that limit the style sheet’s scope by applying media features, such as width, height, and color.

Using relative units for measurements simplifies layouts and prevents you from accidentally creating components that are too big for the viewport. In addition, using relative units allows browsers to render the content, based on the user’s zoom level, without the need for adding horizontal scroll bars to the page.

The most commonly used media queries are:

  • min-width Rules applied for any browser width over the value defined in the query
  • max-width Rules applied for any browser width below the value defined in the query
  • min-height Rules applied for any browser height over the value defined in the query
  • max-height Rules applied for any browser height below the value defined in the query
  • orientation:portrait Rules applied for any browser where the height is greater than or equal to the width
  • orientation:landscape Rules for any browser where the width is greater than the height

Note: There is an important difference between min-width and min-device-width. The value for min-width is based on the size of the browser window, while the value for  min-device-width is based on the size of the display screen for the device.


Comments

Write a Reply or Comment