Question

I need to design a responsive website that is responsive also when the browser window is resized.

I have added the following code in the head tag:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

And i have included the following styles:

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px) and (max-device-width: 1500px)" href="style.css" /> 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />

However when i resize my browser window to a width of less than 480 pixels, still the document is styled using style.css whereas it should have been styled by mobile.css

What am i missing?

Answer 1

max-device-width refers to your device resolution, not the window width size, that is min-width or max-width see here for better understanding.

device-width are used when you want to target mobile devices but not desktop small resized windows.

So, if you want your mobile.css be used for mobile devices with screen resolution width less than 481px and also include desktop browsers windows resized to less than 481px then replace:

(max-device-width: 480px)

for:

(max-width: 480px)

in your mobile.css media query rule.