-4
<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" />
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Oct 01 '18 at 15:38
  • `-device-width` is not the same as `-width`. `-device-` will not always match the width of the viewport which is what the page is/can be rendered in. While the screen you're testing on may be less than 480 in `max-width` its `min-device-width` could be completely different. – Wild Beard Oct 01 '18 at 15:44
  • Possibly related to https://stackoverflow.com/questions/18500836/should-i-use-max-device-width-or-max-width – MarkPraschan Oct 01 '18 at 15:46

2 Answers2

1

If you mean that the general rules from the first included styesheet don't apply: That's due to your use of min-device-width in the first line. Erase that , like:

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

That way the first stylesheet will be loaded, afterwards the rules from the second stylesheet will overwrite those with identical selectors from the first stylesheet, as you probably intended.

In your version only the second stylesheet will apply to smaller devices, without the first one...

Also, think about if you really want to use max-device-width, or rather just max-width. A media-query with max-device-width: 480px will in most cases only apply to devices which are smaller that 240px "CSS pixels" (which hardly exist anymore) due to the double (or more) pixel density of most modern devices.

Johannes
  • 64,305
  • 18
  • 73
  • 130
0

i resolve my problem with trhis 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.