Responsive web design in 3 steps:
step:1
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>Media Responsive Web page</title>
<style type="text/css">
@media (min-width: 481px) and (max-width: 768px)
{
#banner { width:740px; }
#banner img { max-width:740px; max-height:222px; }
#main { width:740px; }
}
@media (min-width: 321px) and (max-width: 480px)
{
#banner { width:450px; }
#banner img { max-width:450px; max-height:135px; }
#main { width:450px; }
}
@media (max-width: 320px) {
#banner { width:275px; }
#banner img { max-width:275px; max-height:83px; }
#main { width:250px; }
}
</style>
<div id="banner"><img src="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/sky.gif"></div>
<div id="main">
Proin eu magna a purus feugiat
</div>
</head>
</html>
rw
step:1
tep 1. Meta Tag (view demo)
Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. You can use the viewport meta tag to reset this. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. Include this meta tag in the <head>.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Internet Explorer 8 or older doesn't support media query. You can use media-queries.jsor respond.js to add media query support in IE.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->Step 2. HTML Structure
In this example, I have a basic page layout with a header, content container, sidebar, and a footer. The header has a fixed height 180px, content container is 600px wide and sidebar is 300px wide.
Step 3. Media Queries
CSS3 media query is the trick for responsive design. It is like writing if conditions to tell the browser how to render the page for specified viewport width.
The following set of rules will be in effect if the viewport width is 980px or less. Basically, I set all the container width from pixel value to percentage value so the containers will become fluid.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>Media Responsive Web page</title>
<style type="text/css">
@media (min-width: 481px) and (max-width: 768px)
{
#banner { width:740px; }
#banner img { max-width:740px; max-height:222px; }
#main { width:740px; }
}
@media (min-width: 321px) and (max-width: 480px)
{
#banner { width:450px; }
#banner img { max-width:450px; max-height:135px; }
#main { width:450px; }
}
@media (max-width: 320px) {
#banner { width:275px; }
#banner img { max-width:275px; max-height:83px; }
#main { width:250px; }
}
</style>
<div id="banner"><img src="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/sky.gif"></div>
<div id="main">
Proin eu magna a purus feugiat
</div>
</head>
</html>
rw
No comments:
Post a Comment