Html5 /CSS3 mobile help please

MJML · 12-15-2010, 07:17 PM

I know that there is JavaScript that allows you to detect the size of the screen that a webpage is being viewed on and i know there is some JavaScript to change pages. This is put in the head section of your html page i believe.

I need to know how to change style sheets as opposed to webpages and i dont know how to do this.

My question is what is it?

This is what i have found and researched myself but i dont think it is a window.location i need to be changing. Any help?

VIPStephan · 12-15-2010, 08:09 PM

If you’re actually talking about CSS 3 then do a search for “media queries”. This is all you need to serve different styles to different physical conditions.

MJML · 12-15-2010, 08:21 PM

Yeah i have one of those currently implemented but i had a lecture with Bruce Lawson not so long ago and he did a demonstration on html5 and css. He could move his browser window to different widths and once he got so far the whole site would use a different style sheet. He cold go so far and it rearrange all the positioning and then when he went to a really small width it would load just an image. Now i have reason to believe that it was Java but i cant find it anywhere. A media queries will have to do for now unless some one can enlighten me

thanks though Stephan it did help.

VIPStephan · 12-15-2010, 08:45 PM

You can do exactly what you explained with CSS media queries. Look at this example in the newest Firefox or Safari while resizing your browser window horizontally:

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>CSS3 media query test</title>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<style type="text/css">
		#div1 {
			height: 100px;
			width: 45%;
			background: lime;
			float: left;
			padding: 10px;
		}
		#div1:after {content: "float: left;";}
		#div2 {
			height: 100px;
			background: red;
			padding: 10px;
		}
		@media screen and (max-width: 800px) {
			#div1 {
				background: aqua;
				float: right;
			}
			#div1:after {content: "float: right;";}
			#div2 {background: yellow;}
		}
		@media screen and (max-width: 500px) {
			#div1 {
				float: none;
				background: maroon;
				color: white;
				width: auto;
			}
			#div1:after {content: "float: none;";}
		}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="div1">div 1</div>
			<div id="div2">div 2</div>
		</div>
	</body>
</html>