I'm making and adaptive website, and I load time by time the CSS file, based on the resolution of the screen.
But I'm struggling to have it correctly executed on all the platforms. I have not clue where I wrong
Please, let me make some example
Into the index.html file, I put this selector among tha other ones:
<link type="text/css" media="screen and (min-width: 2001px) and (max-width: 2499px)" href="css/2048-1536.css" rel="stylesheet">
then I load it into a Tablet, that has resolution 2048x1536 And it should be loaded the related CSS file.
instead of the site is broken. All the objects are wrongly placed and not any object is in order. Then I test it with Google Chrome F12 > Emulation > Device and I put the resolution up there. And it works fine.
Also just shrinking the browser it works ... thus I have not clue what to do in order to make it work ...
Use this:
<link type="text/css" media="only screen and (min-width: 2001px) and (max-width: 2499px)" href="css/2048-1536.css" rel="stylesheet">