INTRODUCTION
Media queries simply exist in css to fix website content not fitting a particular device's screen. it is common with mobile phones. you can watch the video here. LEARN PRACTICAL CSS MEDIA QUERIES
PROBLEM
sometimes there will be vertical bars appearing on a page we visit suggesting that the content does not fit the screen so well. when this happens, the user then needs to be tapping the screen to the left and right to view the contents and this goes a long way to make the user's experience a hassle. This is the problem css media queries came to fix.
WHAT ARE MEDIA QUERIES?
Media queries are similar to conditions in programming languages. They are used for specifying rules to be applied to a particular screen of a device. on the other hand, we can say Media queries use the @media rule, followed by conditions like screen size, device type, resolution, and even fancy features like touch or printer media.
CSS MEDIA QUERY BREAKPOINT
Breakpoint in css media query for responsive design is the screen size of devices we target during media queries. so the most popular screen we have are the
- DESKTOP SCREENS (1200 px and upwards)
- TABLETS (992 px)
- MOBILES (768 px)
We provide and target these devices so to ensure that our website will be fit perfectly on them.
MEDIA QUERIES CONDITIONS
Knowing how to specify css media query conditions will make responsive web design fly at your fingertips. Achieving responsive web design is dependent on your knowledge of the css media query conditions.
Mostly, the two conditions in specifying css media queries are MIN-WIDTH and MAX-WIDTH.
let's take note of the following.
1. MAX-WIDTH:
@media screen and (max-width: 992px){.container{grid-template-columns: auto;width: 100%;padding: 0;}.text-wrapper{padding: 5px;}}
Here, we're saying: "If the screen is 992px wide or less, make the width 100% and change the column to one. It's like magic but with code!
2. MIN-WIDTH:
@media screen and (min-width: 992px) { body{ background: yellow; }}
Min-width is the opposite of the max-width in css media queries. it's used for setting the minimum screen devices must get for media query rules to be set. Considering the image above, the (min-width: 992px) means, changing the background of the body to red from the device with a screen from 992px upwards. we are not limited to only the body's background, we are at liberty to change just anything we want using media queries.
@media screen and (min-width: 992px) {body{background: yellow;}}
Min-width is the opposite of the max-width in css media queries. it's used for setting the minimum screen devices must get for media query rules to be set. Considering the image above, the (min-width: 992px) means, changing the background of the body to red from the device with a screen from 992px upwards. we are not limited to only the body's background, we are at liberty to change just anything we want using media queries.
IMPORTANT NOTE
when designing responsive with css media queries, always make sure the larger screens you have targeted will be on top of the smaller screens. what am I trying to say, if you have css media query specifying a rule for ( max-width: 992px ). The next one which is ( max-width: 768px ), must come beneath it.
first, define the larger screen first before you specify the smaller screen. Things may not work perfectly if you neglect this. That is how css media queries are designed to work. Consider the practical we used in our YouTube video below.
@media screen and (min-width: 992px) {body{background: yellow;}}@media screen and (max-width: 992px){.container{grid-template-columns: auto;width: 100%;padding: 0;}.text-wrapper{padding: 5px;}}@media screen and (max-width: 768px) {body{background-color: green;}}@media screen and (max-width: 400px) {body{background-color: orange;}}
CONCLUSION
css media queries solve the issue of website contents not fitting some devices screeen. it introduces website responsiveness. we start by using the @ media screen and (condition). The condition is where you will put up your condition to render. Everything specified in the block will apply only to devices that meet the media queries rule. Keep in mind, that higher screen resolutions are always on top of the smaller ones when declaring css media query rules for website responsiveness. Thank you
You can join us on Telegram Largest Telegram Community
WATCH THE YOUTUBE PRACTICAL LESSON
Tags
CSS