Responsive design concept

Different Resolution Different Style

“Different Resolution Different Style” is a simple example of responsive design method and how take advantage of CSS Media Quires.

DEMO LINK: http://parhammajd.co.uk/examples/css/resoluationChange.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Different Device Different CSS</title>
<style>
@media screen and (min-width:800px) {
h2 {
background-color:#996;
}
p {
background-color:#C30;
}
}
@media screen and (max-width:480px) {
img {
display:none;
}
h2 {
background-color:#6F0;
}
p {
background-color:#FF0;
}

}
</style>
</head>

<body>
<img src="An Empty Hammock, Kauai, Hawaii.jpg" alt="beach" width="1000" height="500"/>
<h2>The first headline</h2>
<p>The first paragraph</p>
<h2>The second headline</h2>
<p>The second paragraph</p>
</body>
</html>

 


Leave a Reply

Your email address will not be published. Required fields are marked *