Menu
I'm creating a website and have successfully created media queries with external CSS files for both mobile and desktop styling. You can see the HTML below linking to the external sheets; mobile.css is used on devices <767px and desktop.css is used on devices >768px.
<head>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" media="screen and (max-width: 767px)" href="css/mobile.css" />
<link rel="stylesheet" media="screen and (min-width: 768px)" href="css/desktop.css" />
</head>
Having designed the site, I believe I can make this more responsive and would like to change desktop.css to tablet.css and create a new desktop.css for devices over 1000px. Linking the below external CSS with media queries doesn't work though:
<head>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" media="screen and (max-width: 767px)" href="css/mobile.css" /> <!-- This works fine -->
<link rel="stylesheet" media="screen and (min-width: 768px)" href="css/tablet.css" /> <!-- This works fine -->
<link rel="stylesheet" media="screen and (min-width: 1000px)" href="css/desktop.css" /> <!-- Doesn't work -->
</head>
The above produces mobile.css working correctly and tablet.css correctly but it just keeps tablet.css when it goes over 1000px rather than applying desktop.css.
My question is would I go about adding a third CSS file for devices over 1000px?
Any help will be greatly appreciated.
Thanks,
Philpot
469
Don't know the method exactly, but how about this:
<link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 999px)" href="css/tablet.css" />
or
<link rel="stylesheet" media="screen and (min-width: 768px,max-width: 999px)" href="css/tablet.css" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
