CSS Media Types and Queries for Mobile Responsive Design

Nowadays mobile responsive websites and even web applications are very common. Everyone wants to develop their websites and web apps should be mobile responsive, which means clearly visible and interactive in every handheld devices. Due to the smartphone revolution, mobile browser users are more than desktop browsers. To target the mobile browser user every organization/individual is mostly preferred to develop mobile responsive websites or web apps. Every UI/UX developer should know about responsive and more interactive designs. In responsive design, CSS media queries play a very crucial role, why because using media queries we can write device-specific CSS code which is a basement of responsive design.

Let's dive into details of CSS media types and queries

In CSS2 @media rule was introduced for the first time to define the rules for different media types such as computer screens, handheld devices, printers, and TV screens but it not supported as expected for many devices except printers.

Later in CSS3 media queries were introduced by extending the @media from CSS2. Media queries look for the resolution of the screen, not the devices. As per the width and height of the screen, Media query rule will be applied.

Media Types

There are four media types

• all (used for all media types)
• screen (used for screens)
• print (used for print devices)
• speech (used for screen readers)

We can link the media specific external stylesheets in the header part of the HTML file.

<link rel="stylesheet" media='print' href="print.css">
<link rel="stylesheet" media='screen' href="styles.css">

Media Queries

Media queries rules are used to write the device-specific styles and syntax is

@media mediatype not|only|and|, (expressions){
    /*css code here*/
}

",", "and", "not", "only" are used to combine the two or more media queries to make complex media query.

and

let's write some CSS for mobile browsers smaller than 480px(iPhone)

@media screen and (max-width:480px){
    .nav{
        font-size:12px;
        display:block
    }
}

The above media query is combined with "and" condition, When the device screen width is 480px or less, then above styles are applied to nav class

Now we will target range of the screen width

@media screen and (min-width:480px) and (max-width:768px){
    .nav{
        color:green
    }
}

Font color will be green when screen width in between the 480px and 768px(tablet screen width)

For Tablets, iPads (portrait) screens, We can write following media query

@media screen (min-width:480px) and (min-width:1024px){
    .nav{
        color:grey
    }
}

For laptops/desktop screens

@media screen and (min-width:1224px){
    .nav{
        color:blue
    }
}

For large desktop screens

@media screen and (min-width:1884px){
    .nav{
        color:red
    }
}

For screen orientations

@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    .nav{
        color:blue;/*Color will be blue,When screen orientation is portrait and width in between 481px and 1024px*/
    }
}

@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    .nav{
        color:tomato;/* color will be tomato ,When screen orientation is landscape and width in between 481px and 1024px*/
    }
}

or(,)

@media (max-width:480px), (min-width:768px){
    .html{
        color:green
    }
} 

Two separate media queries are joined with "," and styles will be applied when screen width is 480px or less and 768px or above.

only

"only" keyword is used to not load stylesheet by the browser which not support the media queries.

@media only screen (max-width:480px){
    html{
        color:green
    }
} 

not

if we write a media query with "not" keyword, media query is true without not will become false. media query not supported browsers will not understand the "not" keyword, therefore associated styles are not applied.

@media not screen (max-width:480px){
    html{
        color:green
    }
} 

Device screen widths for media queries

• Mobile phone screens width : 480px
• Tablets(ipad) screen width : 768px
• Laptop and Desktop screen widths > 1024px

Note:-First design layout for the mobile phone screen and then use media queries for tablet and desktop screens, Thus development will be faster.