MEDIA QUERY

CSS MEDIA QUERY

CSS media query allows us to create responsive websites across all screen sizes ranging from desktop to mobile. So it’s very important to know this topic. They can be used to detect other things about the environment your site is running or for example whether the user is using touchscreen rather thana a mouse.

MEDIA QUERY BASICS

@media media type and (media feature rule) {/* css rules go here */}

. Media type tells the browser what kind of media this code is for {example print or screen}

. Media expression which is a rule or test that must be passed for the contained CSS to be applied.

Get Biswas chhetri’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

. A set of CSS rules that will be applied if the test passes and the media type is correct.

MEDIA TYPE

.all .print .screen

@ media print {
        body {
           font size: 12pt;
            }
           }

This media query will set the body to 12pt if the page is printed. It will not apply when the page is loaded in the browser. After specifying a media type we can then target a media feature with a rule.

WIDTH AND HEIGHT

The feature we tend to detect most often in order to create responsive dsesign is viewport width and we can apply CSS if the viewport is above or below a certain width or an exact width using the min width, max width, and width media features. These features are used to create layouts that respond to different screen sizes for example to change the body color to red if the viewport is exactly 500 pixels:-

@ media screen and (width:600px;) {
body { 
      color:red;}
/* for example to make the color blue if the viewport is 600 pixels or Narrower */
@media screen and (max-width: 600px) { 
               body { 
                color: blue;
                 }
/* In practice using minimum and maximum value is much more useful for responsive web sedign */

ORIENTATION

One well supported media feature is orientation which allows us to test for potrait or landscape mode

@media (orientation: landscape) {
body{
color:blue;
}
This changes the color of the body text to blue if the ddevice is in landscape mode.

USE OF POINTING DEVICES

As part of the level 4 specification, the hover media feature was introduced. This means that you can test if the user has the ability to hover over an element which essentially means they are using some kind of pointing device touchscreen and keyboard navigation does not hover.

@media (hover : hover ) {
body {
color:rebeccapurple;
}

“and” LOGIC IN MEDIA QUERIES

To combine media queries you can use and in same way as we have used to combine media type and feature.

@media screen and (min-width : 600px) and (orientation: Landscape){
body { color:blue;
 }
}

The body text will turn blue only if the viewport is at least600 pixels wide and the device is in landscape mode.\

“or” LOGIC

@media screen and (min-width:600px), screen and (orientation: landscape) {
body{
color:blue;
 }
}

Here the comma separates the queries. In this example, the text will be blue if the viewport is at least 600 pixels or the device is in landscape orientation. If either of these two things is true then the query matches.

“not” LOGIC

You can nullify an entire media query using the not operator. This reverses the meaning of the entire media query. Therefore

@media not all (orientation: landscape) {
body {
color:blue;
 }
}
/* The text will turn bluie if the orientation is potrait */

The points at which the media queries are introduced are known as break points.