: Is there a single set of Media queries for all the devices? I am using different media queries for each type of resolution, is there a better way of doing this?

@Nimeshi995

You can use portrait and landscape which will detect if the resolution is longer in width or longer in height, but generally its best to use a set of media queries to break down the most common type of devices. Ideally your website should be using widths and heights using percentages rather than pixel based elements, this will allow your website to adapt to almost any size, most responsive frameworks will use this method.

Because using % rather than px your content should adapt, what won’t change is the size of the text, however using a set of 4 media queries you can easily adjust these elements and anything else you want.

Common media queries sizes are:


Mobiles max-width:640px
Tablets max-width:1024px
Desktops max-width:1920px
2K 4K max-width:1921px


The above resolutions will look something like:

/* Small screen max-width 640px */
@media only screen and (max-width:40em){}
/* Medium screen min-width 641px */
@media only screen and (min-width:40.063em){}
/* Medium screen min-width 641px and max-width 1024px */
@media only screen and (min-width:40.063em) and (max-width:64em){}
/* Large screen min-width 1025px */
@media only screen and (min-width: 64.063em){}
/* Large screen min-width 1025px and max-width 1440px */
@media only screen and (min-width: 64.063em) and (max-width: 90em){}
/* Extra large screens min-width 1441px */
@media only screen and (min-width: 90.063em){}
/* Extra large screens min-width 1441px and max-width 1920px */
@media only screen and (min-width: 90.063em) and (max-width: 120em){}
/* Extra Extra large screens min-width 1921px */
@media only screen and (min-width: 120.063em){}


You shouldn’t look to render the page exactly the same on all devices, its common with responsive design that pages will look slightly different from device to device, and this is because of the width or height of the device.

What you should be aiming for is a site that looks great, and functions well on resolutions. When designing your site you can rescale the browser window and you can see how your page would render on different devices, it should be readable, look good and anything that doesn’t work on the mobile change it, or use display:none, its rather common to disable features on mobile for faster page loads and better user experience. Attempting to build the exact same look on all devices is impossible, and a waste of time.

I recommend you head over to Stack Overflow as there's literary hundreds of topics regarding media queries as any in-depth CSS related questions on Pro Webmasters would be better suited on SO.

Vote Up Vote Down