Fri May 28 2021
How To Use CSS Media Queries For Responsive Design?
Nowadays a lot of people are using smartphones of different screen sizes so as to surf the internet. However, on screens of different sizes if we have to fit the content then we have to follow an approach of different type. For instance, two columns are needed for displaying the content in a tablet whereas only one column is needed for displaying that content in the smartphone. We can say that the people are using a number of devices. So, for responding to their requirements, we need to have a web design that is responsive. As per the different sizes of screens you have to adapt your website accordingly.
Suppose you want a pink colored background for a 500px or less than this in a browser window then:
@media only screen and (max-width: 500 px) {
body {
background-color: pink;
}
}
How to use a Breakpoint?
It is possible that on the breakpoint's each side a different behavior is shown by the design’s certain parts. By adding a breakpoint with the help of media queries you can do this. We do this because on a screen of small size it is not possible to get a good-looking design by using columns and rows.
Suppose at 760px you want to use breakpoint.
Here if you take interest in having a 90 % width of the column for a below 760px screen size then:
/* Desktop purpose */
.col-1 {width: 7.50%;}
.col-2 {width: 15%; }
.col-3{width: 22.50 %;}
.col-4{width: 30%;}
.col-5{width: 37.50%;}
.col-6{width: 45%;}
.col-7{width: 52.50%;}
.col-8{width: 60%;}
.col-9{width: 67.50%;}
.col-10{width: 75%;}
.col-11{width: 82.50%;}
.col-12{width: 90%;}
@media only screen and (max-width: 760px) {
/* Mobile purpose */
[class*=”col-”] {
width: 90%;
}
}
Designing it initially for the mobile phone will be a good idea
Here more than 760px width needs to be included in the design and not less than 760px.
If we design it initially for the smartphones then on the smartphones as well as on several devices of small screen sizes the content will be displayed very quickly.
/* Mobile purpose */[class*="col-"]{
width: 90%;
}
@media only screen and (min-width: 760px) {
/* desktop purpose*/
.col-1 {width: 7.50%;}
.col-2 {width: 15%;}
.col-3{width: 22.50 %;}
.col-4{width: 30%;}
.col-5{width: 37.50%;}
.col-6{width: 45%;}
.col-7{width: 52.50%;}
.col-8{width: 60%;}
.col-9{width: 67.50%;}
.col-10{width: 75%;}
.col-11{width: 82.50%;}
.col-12{width: 90%;}
}
One more breakpoint
If the size of a gadget is under 760px but above 600px then new classes can be easily set for this.
As per your desire adding any number of breakpoints is possible. The smartphones and tablets can have breakpoints in-between.
/* mobile purpose */
[class*=”col-“] {
width: 90%;
}
@media only screen and (min-width: 600px) {
/* tablets purpose */
.col-s-1 {width: 7.5%;}
.col-s-2 {width: 15%;}
.col-s-3 {width: 22.50%;}
.col-s-4 {width: 30%;}
.col-s-5 {width: 37.50%;}
.col-s-6 {width: 45%;}
.col-s-7 {width: 52.50%;}
.col-s-8 {width: 60%;}
.col-s-9 {width: 67.50%;}
.col-s-10 {width: 75%;}
.col-s-11 {width: 82.50%;}
.col-s-12 {width: 90%;}
}
@media only screen and (min-width: 760px) {
/* desktop purpose */
.col-1 {width: 7.50%;}
.col-2 {width: 15%;}
.col-3{width: 22.50 %;}
.col-4{width: 30%;}
.col-5{width: 37.50%;}
.col-6{width: 45%;}
.col-7{width: 52.50%;}
.col-8{width: 60%;}
.col-9{width: 67.50%;}
.col-10{width: 75%;}
.col-11{width: 82.50%;}
.col-12{width: 90%;}
}
Some important things to know
Viewport setting
For controlling the scaling and dimensions of the page some instructions can be given to the browser by the meta viewport tag. It is necessary that in the document’s head you incorporate the meta viewport tag if for a number of devices, you have to optimize the pages. For the screens of different sizes fitting of the content can be done if:
- We scale the content.
- Increase the size of the font to make it appear good on the smartphone browsers also.
<html lang="en">
<head>
<meta name = ”viewport” content = “width = device-width, initial-scale = 1”>
</head>
</html>
If you want that the two types of pixels in which one is device-independent and other are the pixels of CSS, build a relationship of 1:1 type then you have to give instructions to the browsers in the form of initial-scale = 1. For the purpose of matching the pixels that are device-independent with the width of the screen you have to give instructions width = device-width.
If someone takes interest in getting the services of SEO and in the development of mobile apps, software or website then it will be good for him to contact a web development company.