28/11/2021

CSS Media Query & Responsive Design

Media Queries

90% of traffic on the web comes from mobile. That’s why the designed websites should have a responsive design suitable for mobile use, and the CSS media query structure plays a big role in this regard.

Media query structure is used to show the content on large screens appropriately on the small screen or to prevent the page content from overflowing and scrolling in different screen sizes. While coding websites, they are optimized with responsive CSS codes according to different mobile screen sizes.

With media query, CSS codes can be applied to HTML elements at specific screen widths.

For example, while the <p> tags are 17 pixels in a page, the font size of the <p> tag can be set to 14 pixels in order to maintain the ratio on screens below 600 pixels.

Min-width Media Query

When min-width is used, CSS codes written under the media query are valid for the specified pixel value.

As in the example below, the font size of the p tag is specified as 17 pixels, up to a maximum of 751 pixels.

@media (min-width: 751px) { 
   p {
     font-size: 17px;
   }
}

Max-width Media Query

When max-width is used, the CSS codes written below the media query are valid for less than the specified pixel value.

As in the example below, the font size of the p tag is specified as 14 pixels, up to a maximum of 750 pixels.

@media (max-width: 750px) { 
   p {
     font-size: 14px;
   }
}

Orientation: Landscape

Orientation: In landscape use, CSS codes written under the media query are valid when mobile devices are placed in horizontal position.

In the example below, the CSS code that will change the color of the box when the mobile device is horizontal is specified.

Media Query Orientation Landscape

Vertical

Media Query Orientation Landscape

Horizontal

div {
    height: 100px;
    width: 100px;
    background-color: bisque;
}
@media (orientation: landscape) {
    div {
        background-color: brown;
    }
}

Orientation: Portrait

Orientation: In portrait usage, CSS codes written under the media query are valid when mobile devices are in vertical position.

Media Query Orientation Portrait

Vertical

Media Query Orientation Portrait

Horizontal

h1 {
   font-weight: 100;
}

@media (orientation: portrait) {
   h1 { 
      font-weight: bold; 
   } 
}

Legacy Browsers Compatibility

The only concept used in the media query prevents the execution of invalid media queries in older browsers. It does not have any effect in new browsers.

@media only screen and (max-width: 750px) {...}

Media Query & Viewport

In order for the media query structure to work, the viewport meta tag must be added to the <head></head> tag in the source code of the page.

<meta name="viewport" content="width=device-width, initial-scale=1">

Source:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries