The Responsive media queries used to get well display your website for all devices such as a small smartphone or large desktop devices.
These queries can be used for the screen resolution ranges from 320 Px to 1824 Px or even more large screens. It is important to cover all the most in used screen sizes while developing a website.
Nowadays users access your site from not only laptop or monitor but also mobile phones, mini notebooks and tablet devices such as iPad or Playbook. So when you are going to design a website, you should keep in mind all the general devices and their screen sizes.
The website design with a fixed width doesn’t work for these useful devices so we should require the site should be responsive and can easily view all kinds of devices. The layout of the website should be automatically adjusted to fit all kinds of screens resolutions.
In this article, I will teach you how to create different media queries for Responsive Design. In my last post, I have listed some top famous CSS frameworks which you can use to build your website to get the responsive layout.
Now I am going to share with you how you can add more queries to your custom site or a site that builds using a framework.
Remember that, Using a framework doesn’t mean that you don’t need media queries because the framework does not handle each element of your website.
How to Use Responsive Media Queries for all Devices
The below media queries for smartphones and IPads are work with portrait and landscape view. These queries work with min and max width of the device.
If you want to separate the queries for landscape and portrait, then you need to define @media only screen with min-width.
/* Smartphones */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* iPads */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
For example, If we want to separate the media queries for landscape and portrait for smartphones then our queries will look like below.
/* Smartphones (landscape) */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) */
@media only screen
and (max-width : 320px) {
/* Styles */
}
To handle the design of desktop and laptop, You have to add the following media queries.
/* Desktops and Laptops */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large Screens */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
There are many more screen sizes available and you can use the media queries for these sizes but it’s not necessary.
The above queries are sufficient to make a site fully responsive. Any size bigger than 1824 Px will still look the same as the 1824px size screen.