CSS Media Queries and Responsive Design

CSS Media Queries and Responsive Design | Responsive Web Design – Media Queries in CSS with Examples

by

Media and responsive queries matter as they can change the view of a website on a desktop platform and also in a mobile platform to use the viewport much better. Just follow the below-provided links and understand what are CSS Media Queries and Responsive Design.

CSS Media Queries

All the above rules we saw are applied to@importor to thelinkHTML tag can be used inside the CSS, too.

You should wrap them in a @media () {} structure.

Example:

@media screen and (max-width: 800px) {
  /* enter some CSS */
}

Moreover, this is the basis for responsive design.

Media queries can be pretty challenging. But this example implements the CSS only if it’s a screen device, the width is between 600 and 800 pixels, and the orientation is the landscape:

@media screen and (max-width: 800px) and (min-width: 600px) and (orientation: landscape) {
  /* enter some CSS */
}

Do Refer: 

How do you write media queries in CSS for Responsive design?

The syntax for CSS media queries relates to TestNG annotations which as a novice web developer, you will obtain a bit different & unique. The media query can be performed by the word “media” as shown below:

@media <media_type> connector ( <query> )

As an example:

@media only screen and (max-width: 480px) {
  /* CSS rules to apply /*
}

This media query will see for screens (“only screen” as addressed) with a max-width of 480px. If it attains one, the conditions will be performed and the changes will be addressed to the HTML code.

If we just use the media type and not the media expressions (queries), the following values are accepted:

  • all
  • print
  • screen
  • speech
@media print {
   .heading {
     font-size: 12px
   }
}

The above query will obtain the content with the class name heading to a font size of 12 pixels when the page wants to be printed.

Media types

In media queries and @import declarations, we can use media types that allow us to determine on which media a CSS file, or a piece of CSS, is loaded.

Media types are:

  • all means all the media
  • print used when printing
  • screen used when the page is presented on a screen (default)
  • speech used for screen readers

Example:

@import url(myfile.css) screen;
@import url(myfile-print.css) print;

/* OR */

@import url(myfile.css) screen, print;

It can also be used in the link tag of an HTML page, like:

<link rel="stylesheet" type="text/css" href="another.css" media="screen, print" />

Media feature descriptors

These additional keywords are used to express more conditionals. These are:

  • width
  • height
  • device-width
  • device-height
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • orientation
  • scan
  • grid

They have a min-* and max-* property, like:

  • min-width, max-width
  • min-device-width, max-device-width

The values they consume are px, em, rem, or any length values.

Example:

@import url(myfile.css) screen and (max-width: 800px);

We can also specify the orientation of the device, like:

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (orientation: portrait)" />

We can use the scam property to determine the types of screens. Acceptable values are progressive and interlaced.

The color CSS media feature can be used to test the number of bits per color component (red, green, blue) of the output device. This takes an integer value as input. Like this, there are other properties like grid, color-index, monochrome.

There are other values like aspect-ratio and device-aspect-ratio , that accept a ratio value representing the width to height viewport ratio, which is expressed as a fraction.

@import url(myfile.css) screen and (aspect-ratio: 4/3);

Also, there is resolution which represents the pixel density of the device, expressed in a resolution data type like dpi.

@import url(myfile.css) screen and (min-resolution: 100dpi);

Logic operators

We can combine multiple queries with logical operators like and, or(can use , instead) not.

Example:

/* and */
<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (max-width: 800px)" />

/* or */
@import url(myfile.css) screen, print;

/* not */
@import url(myfile.css) not screen;