Media Queries

Media query is one of the powerful tools to design a responsive website. It allows us to create CSS rules on various parameter based on device type, orientation, and viewport size. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Here a particular media feature tells us about the device which is in use. For example, we have screen ,print ,projection , all to know about the media type. In most case, we use screen and print in media queries. A simple syntax of a media query is below.

the below example will target when the user’s input mechanism (such as a mouse) can hover over elements.

We have seen using the media type and the expressions for the media features so far, now let’s see an example which works for the small screen size like mobile phones. On getting a true for the specific screen size it alters the font-size of p tags inside the web page.

The possibilities are many, we can shape a web page according to a specific screen size, whether it is for small size iPhone 375px or a medium size iPad 768px or a Mac Book 1366px . Now we can style a webpage with any screen size.

So max-width and min-width is the most common expression you will use in your work for the responsiveness. But there is some confusion regarding this topic. Let’s make them clear.

What it means that if you go for the mobile-first(min-width) then your website will have a default style for mobile and then will apply media queries for the larger screen sizes. Whereas in desktop-first(max-width) your default CSS rules will be for desktop and then it will render the page for the small screen size. Let’s look for an example for a better understanding.

The min-width:420px will make the background red for screen size which is equal to 420px or greater than that and the max-width:420px will make the background black for the screen size equal to 420px or less than that.

There is cool feature in media queries that allows us to combine both max and min width in the same query.

This will apply the color red to body only for a screen size between 360px and 420px. This is done with the help of and operator between the two.

Using CSS for responsive pages is not all of it. We can use it with a preprocessor like sass for easier maintenance and comfort to write the code. With sass, you are not needed to repeat the same screen size many numbers of time. An example will make it much clearer.

the above example makes the image width to 100px for screen 320px or less than that and will make the image to float right for the screen size 1200px or greater than that.

With sass, we are creating cleaner CSS with less duplication of CSS classes across files and it saves development time by eliminating the need to check multiple locations when we are making some changes.

Related posts:

Clients of mine not only hire me for more work but they refer my business to others, it’s how I have run my business for over 12 years. The reason for this I believe is because I have a clean trail…

You were put on this Earth to enjoy your life. Everyone has a purpose and here to create something great. You are unique on this planet. Enjoying life now.

Over time I have filled several notebooks with some truly great points made during various sermons and messages. These are points that have definitely made an impact on who I am, and my relationship…