What is Responsive Web Design (RWD) and how to use it?
Nowadays, your website is not only limited to desktop or laptop it will be visited by a wide variety of devices like Desktop Tablet and Mobile with large medium and small sized. The layout of your website should adjust in all devices according to their screen resolutions and dimensions. The process of responding the website layout correctly in all devices according to their screen resolution and dimension is referred as responsive web design (RWD). So RWD means website is designed in such a way that all the content and images of website appears according to the device(mobile,tablet,desktop)screen. So if you are a frontend developer then its your responsibility that if a user visits your website by cell phone then the layout of your website should fit correctly into their’s screen so that he/she feels the optimal experience.
There are many methods to implement RWD and Media Queries is one of them. Today i am here to explain you how to use media queries to transform your website into responsive design.
What is a Media Query?
Media query is a simplest way to create responsive layout of your website. It basically works on the logical expression. CSS are written for the diffrent devices by using @media rules. And if it becomes true the related block of code is applied to the target devices. Media Queries is a functionality and technique of HTML/CSS, by which you can render your website into all the devices screen correctly. It uses @media rule on a certain block.
How to Use Media Query?
You can understand the media queries by the given example below.
Example
/*…For Mobile Devices…*/
@media only screen and (max-width: 768px) {
/*… write css style here…*/
}
/*…For Mobile, Tablets and IPads (portrait and landscape)….*/
@media screen and (min-width: 768px) and (max-width: 1024px){
/*… write css style here…*/
}
/*.. For Small Devices (portrait and landscape)…*/
@media screen and (min-width: 320px) and (max-width: 480px){
/*…write css styles here…*/
}
/*..For Desktops and Laptops…*/
@media screen and (min-width: 992px){
/*… write css style here…*/
}
/*…For Large Devices…*/
@media screen and (min-width: 1200px){
/*… write css style here…*/
}
/*…Write like this way also..*/
@media(min-width: 768px) and (max-width:1024px){
/*… write css style here…*/
}
@media(max-width:768px){
/*… write css style here for under 768px devices…*/
}
