Everything You Need To Know About Media Query In CSS

This article will introduce you to an important concept from Web Development perspective known as Media Query In CSS and follow it up with a practical demonstration. Following pointers will be covered in this article,

• Media Query in CSS
• Types Of Media Types Recognized
• Media Query for defining rows and columns
• Media Query For Menus
• Media Query Font Size
• Gallery
• ViewportSize

Moving on with this article on Media Query In CSS

With a technological expansion what we have encountered is the exponential increase in the number of devices. The market is full of devices each with a different range of attributes like device type and screen resolution. With differing device attributes, a different range of code is also needed to create a responsive design for the same.

Therefore, using CSS3’s media queries, you can create responsive designs for various device types including desktop, tablets, IOS devices, Android devices, and many more. Such queries are defined by explicitly mentioning the device type and zero or more expressions which look out for particular media features. You can tailor the needs as per the device type by defining the media queries like color, width, height, and so on. 

Before CSS3 introduced media query, CSS2 had defined media rules wherein you can tabulate various media queries to make the layout effective and responsive for any device type. 

But with CSS3, you could define rules not entirely dependent on the devices but by their orientation. Like defining rules for: 

Width of the device – Supported resolution of the device – Height of the device – Orientation of the device (portrait or landscape). Media queries are logical expressions where we get the response in either ‘True’ or ‘False’. The query returns true, if the device mentioned matches the device in which the document is opened up. 

It makes it easier as you need no extra effort to create a different layout for different devices. You simply add the media type and conditions for devices and your CSS settings help you to build a responsive design layout. The syntax for media queries is defined in HTML4.

Let’s take an example: 

If the browser window is 500 px or smaller (max width is defined as 500 px) then the background color is light blue. 

media only screen and (max-width: 500px) { 
body { 
background-color: lightblue; } 

The condition for media query should stand true in order for it to be applied. So, if you open a document in a device whose width is less than 500 px then the background color will turn light blue for it. 

We know, while developing a website, it is a considerable effort to make it look feasibly good on every device and just not desktop. So, with CSS3’s media query attribute you can make an amazing responsive design using @media type. 

Let’s take an example, how it used to look before the introduction of media type. 

The left side image shows us a document view when we don’t apply for a media type attribute. The right side image shows when we define a media query in the CSS file, the view changes and becomes much more readable and visually appealing. You can also use the ‘all’ attribute to mention the similar changes on the implied data. You can also use different stylesheets for different devices. (.css) 

Moving on with this article on Media Query In CSS

Types Of Media Types Recognized

1. All: Used for all the devices.
2. Braille: For devices that are braille tactile
3. Handheld: For mobile devices or devices which have a smaller screen
4. Print: For documents previewed in “Print Preview” mode on a device.
5. Screen: For color computer screens
6. Projection: For presentations or documents projected on a screen.
7. Speech: For speech enabled synthesizers
8. TV: For televisions or devices with low resolution

Moving on with this article on Media Query In CSS

So, what more can you do by using Media Queries? Let’s see the various attributes that are aligned according to the device type using simple media query rules:

For defining rows and columns

Creating rows and columns in documents need to be well formatted. Often, we have seen that when we open a document with a table, it gets distorted when opened on a different device. So, a proper formatting is needed to avoid any such mismatch. Therefore, we assign media query rules to make it better oriented. 

media screen and (max-width: 767px){ 
.column { 
width: 100%; padding: 5px 20px; float: none; } .container .column:first-child{ 
margin-right: 0; margin-bottom: 20px; } 

When you do so, the screen looks different on different devices: 

Adding a breakpoint: Adding a breakpoint helps you to define rules according to the screen size. When you add a breakpoint, you can change the rules on either sides of the breakpoints. In this way, you make it better oriented for different screen sizes. 

/* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} 
@media only screen and (max-width: 768px) { 
/* For mobile phones: */ [class*="col-"] { width: 100%; } 

 You can therefore use the above query rule to define the pattern of rows and columns for various devices.

Moving on with this article on Media Query In CSS

For Menus

Even for websites, we have a menu style that needs proper alignment in different devices. Like if the menu style looks like this on a desktop: 

Then, to make it mobile device friendly, we use media queries to better navigate through it. 

/* The navbar container */ .topnav { 
overflow: hidden; background-color: #333; } /* Navbar links */ .topnav a { 
float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } 
/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */ 
@media screen and (max-width: 600px) { 
.topnav a { 
float: none; 
width: 100%; } 

After this query, the navigation bar in a mobile device is changed to a rather accessible one like this:

Moving on with this article on Media Query In CSS

Font Size

Now, as the screen size differs and changes, so will the font-size too. The font-size that looks readable on a mobile phone might be smaller for a desktop. So, we need to alter the font-size accordingly. To the rescue, by defining media query condition, you can also set the font-size. 

@media screen and (max-width: 780px) { 
div.example { 
font-size: 40px; }

Now, when the document is opened in any of the device where the condition stands true, the font-size changes to 40 px.

Moving on with this article on Media Query In CSS

Gallery

Even the images structure in a gallery differs with the screen size, print resolution type, or orientation. So, with CSS3’s media type, you can also curate the image gallery with a change in the structure.

Moving on with this article on Media Query In CSS

Viewport Size

The viewport size is defined to provide the best viewing experience. So, when you define the media query rules, you can change the width of the screen, its resolution, or any device related orientation. For example, if the viewport width is less than 768 pixels, it will cover 100% of the viewport width but if it is greater than 768 pixels and greater than 1024 pixels, it will be 750 pixels and so on. 

/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */ @media (min-width: 1281px) 
{ //CSS } /* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px */ @media (min-width: 1025px) and (max-width: 1280px) { //CSS }
 /* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px */
 @media (min-width: 768px) and (max-width: 1024px) 
{ //CSS } /* ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px */ 
@media (min-width: 768px) and (max-width: 1024px) and(orientation: landscape) { //CSS } 
/* ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px 
*/ @media (min-width: 481px) and (max-width: 767px) { //CSS }
 /* ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px */ 
@media (min-width: 320px) and (max-width: 480px) { //CSS

Extreme levels of automated design techniques have been achieved by us, lately. It is good to get your brand name accessible on whichever device you can. You can’t lose out on a client just because you didn’t make the website well-oriented for a device. So, try using CSS3’s media queries to make your website responsive enough on all devices without changing any code or content. 

Check out the Angular Certification Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.