Link to home
Create AccountLog in
Avatar of itkadmin
itkadminFlag for Canada

asked on

How to correctly write CSS/HTML Media Queries in Document Head

Hello

I'm trying to put together a single page, text only HTML document that is responsive. I'd prefer not using an external stylesheet is this is something that will be sent around to various places. Keeping it to one file is easiest in this case.

I am having trouble with the media queries for screen sizes. They work fine on a desktop when I resize the window. They do not work when I look at the page on a mobile device. I've tried a samsung galaxy S4, an IPhone 4 and an iPad. All devices are showing the red background that is only supposed to show for a min width of 769 px.

file attached or you can look at http://www.crow.ws/test/index.html.

Any help is greatly appreciated

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test HTML5 and Media Queries</title>
<style>
/*media queries*/

	
@media print {
	body {
		font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
		}
		
	h1 {
		font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
		}
	}
@media screen,handheld {
	body {
		font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
		width: 80%;
		 max-width: 960px; 
		 margin: auto;
		}
}

@media all and (max-width: 480px) {
body {font-size: 3em; background-color: green;}

}
@media all and (min-width: 481px) and (max-width: 768px) {
	body {font-size: 1.75em; background-color: yellow;}

	}
@media all and (min-width: 769px) {
	body {font-size: 1.2em; background-color: red;}
	
	}

	
h1 {
	font-size: 2em;
	margin: 2em 0;
	text-align:center;
}

h2 {
	margin: 1.25em 0 0 0;
}

header p, .header {
	font-style:italic;
	text-align:center;
}

p {
	margin-top: 0px;
}

aside {
	font-style:italic;
}
</style>
</head>

<body>
<header>
<h1>This is the Title of the Document</h1>
<p class="header">Some info about the document <time datetime="2013-09-17">September 17, 2013</time>.</p>
</header>
<hr>
<article>
<h1>Article 1</h1>
<aside><p>an overview of this article for people who don't want to read all the details</p></aside>

      <p> Lorem ipsum sit amet, consectetur adipiscing elit. Pellentesque et   ligula diam. Vestibulum cursus posuere ante vel pulvinar. Praesent   vitae tincidunt lorem, et posuere dui. Vestibulum a turpis aliquam,   fringilla nibh eget, congue magna. Morbi feugiat arcu ut ante aliquam,   in facilisis neque pulvinar. Mauris blandit et tortor nec viverra.   Nullam eleifend lobortis gravida. Mauris nec tortor molestie, rutrum   eros quis, mattis magna. In id turpis sem. Donec suscipit nibh euismod   turpis mattis tincidunt. Quisque lobortis magna ut sem dignissim   sagittis. Sed rutrum magna vitae augue pellentesque tincidunt. Integer   fermentum diam augue, quis varius ante semper et. Nullam sit amet porta   tellus. Ut aliquam sodales elit id faucibus. Duis libero diam, laoreet   ullamcorper turpis quis, facilisis placerat enim. </p>
      <p> Curabitur accumsan a sem quis tempus. Aliquam orci diam, eleifend   laoreet porta ut, tempus et urna. Ut sodales, leo posuere semper congue,   sem velit pellentesque tellus, ut consequat urna orci at nisl. Integer   suscipit dolor turpis, quis consectetur est blandit at. Duis id risus eu   velit venenatis venenatis pulvinar eget risus. Maecenas sem arcu,   consequat quis urna tincidunt, sollicitudin tincidunt metus. Maecenas   eleifend imperdiet velit vel feugiat. Aliquam erat volutpat. </p>
</article>
<hr>
<footer>
	<address>
    My Name<br>
    555 Some <abbr title="Road">Rd.</abbr><br>
    Some Town, <abbr title="Massachusetts">MA</abbr><br>
    <abbr title="United States of America">USA</abbr>, 01230
    </address>

</body>
</html>

Open in new window

index.html
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

See how this works on screen and mobile http://jsbin.com/uXAZoRI/1/

I added the below code from suggestion http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript
/* high resolution screens */  
@media (-webkit-min-device-pixel-ratio: 2),  
             (min--moz-device-pixel-ratio: 2),  
             (min-resolution: 300dpi) {  
  header { background-color: purple; }  
}  
  
/* low resolution screens */  
@media (-webkit-max-device-pixel-ratio: 1.5),  
             (max--moz-device-pixel-ratio: 1.5),  
             (max-resolution: 299dpi) {  
  header { background-color: purple; }  
}

Open in new window


I have always used bootstrap and foundation it they just worked...
ASKER CERTIFIED SOLUTION
Avatar of itkadmin
itkadmin
Flag of Canada image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account