Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS media queries min-width and min-device-width conflicting?

I am very new to the world of media queries, and it's clear there's something fundamental I'm missing about the difference between width and device-width -- other than their obvious targeting capacities.

I would like to target both regular computers and devices with the same breakpoints, so I just duplicated all of my min & max width queries to min-device and max-device width queries. For whatever reason, when I add the -device counterparts, my CSS is interpreted very differently by regular computers, and I'm not sure what I'm doing wrong.

You can see the effects here (this is what it SHOULD look like)

And here (after adding -device-width to my queries, my CSS gets screwed up at the smallest width -- the larger resolutions are seen even when the browser width is smaller than what is getting called).

Here are my CSS links -- is there something wrong with my syntax? :

<link rel="stylesheet" media="only screen and (max-width: 674px), only screen and (max-device-width: 674px)" href="300.css"> <link rel="stylesheet" media="only screen and (min-width: 675px) and (max-width: 914px), only screen and (min-device-width: 675px) and (max-device-width: 914px)" href="650.css"> <link rel="stylesheet" media="only screen and (min-width: 915px) and (max-width: 1019px), only screen and (min-device-width: 915px) and (max-device-width: 1019px)" href="915.css">   <link rel="stylesheet" media="only screen and (min-width: 1020px), only screen and (min-device-width: 1020px)" href="1020.css"> <link rel="stylesheet" media="only screen and (min-width: 1200px) and (max-width: 1299px), only screen and (min-device-width: 1200px) and (max-device-width: 1299px)" href="1200.css"> <link rel="stylesheet" media="only screen and (min-width: 1300px), only screen and (min-device-width: 1300px)" href="1300.css"> 
like image 659
seaofinformation Avatar asked Mar 07 '13 16:03

seaofinformation


People also ask

What's the significance of max width and min-width in CSS media query?

Max-width and min-width can be used together to target a specific range of screen sizes. @media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.

How do you give both min and max width in media query?

If you want to include both min and max width for responsiveness in the browser, then you can use the following: @media (min-width: 768px) and (max-width: 992px){...} @media (min-width: 480px) and (max-width: 767px) {...}

What is the difference between min device width and min-width?

All you are essentially interested in is the width of the viewport no matter the device. However the main difference between width and device-width is that device-widths don't always match the layout viewport of said device. Many tablets and mobile devices don't always have 1 device pixel per CSS pixel.

Can we set min-width and max width for an element at the same time?

And min-width specify lower bound for width. So the width of the element will vary from min-width to ... (it will depend on other style). So if you specify min-width and max-width , you will set up a lower and upper bound and if both are equal it will be the same as simply specifing a width .


1 Answers

Device-width refers to the display's resolution (eg. the 1024 from 1024x768), while width refers to the width of the browser itself (which will be different from the resolution if the browser isn't maximized). If your resolution is large enough to get you in one break point, but the width of the browser is small enough to get you in another one, you'll end up with an odd combination of both.

Unless you have a legitimate reason to restrict the style sheets based on the resolution and not the size of the viewport, then just use min-width/max-width and avoid min-device-width/max-device-width.

like image 64
cimmanon Avatar answered Oct 08 '22 15:10

cimmanon