Media queries ဆိုတာကေတာ႔ website ကို access လုပ္တဲ႔ device ကိုမူတည္ၿပီး ကၽြန္ေတာ္တို႔ရဲ႕ website ကိုျပဳျပင္ေျပာင္းလဲ ႏုိင္တဲ႔ css 3 ရဲ႕ feature တစ္ခုျဖစ္ပါတယ္။
အဲဒီအတြက္ကို အရုိးရုင္းဆံုး ပံုစံေလးတစ္ခုလုပ္ထားပါတယ္။
ေအာက္က code ကိုစမ္းၾကည့္ရင္နားလည္ႏုိင္မယ္ ထင္ပါတယ္။ အဲဒီ site ကို browser မွာ Ctr + ကိုႏွိပ္ၿပီး ဘယ္လိုေျပာင္းလဲသြားလဲဆိုတာကို စမ္းၾကည့္ႏုိင္မယ္ထင္ပါတယ္။ Ctr + ကိုဆက္တုိက္ႏွိပ္လိုက္ရင္ screen size ေသးသြားတဲ႔အတြက္ side bar က content ေအာက္ကိုက်သြားတာ ေတြ႔ႏုိင္ပါတယ္။
အဲဒီအတြက္ကို အရုိးရုင္းဆံုး ပံုစံေလးတစ္ခုလုပ္ထားပါတယ္။
ေအာက္က code ကိုစမ္းၾကည့္ရင္နားလည္ႏုိင္မယ္ ထင္ပါတယ္။ အဲဒီ site ကို browser မွာ Ctr + ကိုႏွိပ္ၿပီး ဘယ္လိုေျပာင္းလဲသြားလဲဆိုတာကို စမ္းၾကည့္ႏုိင္မယ္ထင္ပါတယ္။ Ctr + ကိုဆက္တုိက္ႏွိပ္လိုက္ရင္ screen size ေသးသြားတဲ႔အတြက္ side bar က content ေအာက္ကိုက်သြားတာ ေတြ႔ႏုိင္ပါတယ္။
<!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" /> <!-- disable iPhone inital scale --> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <script type="text/javascript" src="css3-mediaqueries.js"></script> <link href="mystyle.css" type="text/css" rel="stylesheet" media="screen"> <title>Media queries</title> </head> <body> <div id="wrapper"> <div id="header"> <h1 id="site-logo">Demo</h1> <h2 id="site-description">Site Description</h2> </div> <div id="content"> <div class="post"> blog post </div> </div> <div id="sidebar"> <div class="widget"> widget </div> </div> <div id="footer"> footer </div> </div> </body> </html>
@charset "utf-8";
/* CSS Document */
#wrapper {
width: 980px;
margin: 0 auto;
}
#header {
height: 120px;
background-color:#DDDDDD;
}
#content {
width: 600px;
height:150px;
float: left;
background-color:#00EE00;
}
#sidebar {
width: 280px;
float: right;
background-color:#0000DD;
}
#footer {
clear: both;
background-color:#CCCC33;
}
@media screen and (max-width: 980px) {
#wrapper {
width: 95%;
}
#content {
width: 60%;
padding: 3% 4%;
}
#sidebar {
width: 30%;
}
#sidebar .widget {
padding: 8% 7%;
margin-bottom: 10px;
}
}
@media screen and (max-width: 650px) {
#header {
height: auto;
}
#site-logo {
margin: 15px 100px 5px 0;
position: static;
}
#site-description {
margin: 0 0 15px;
position: static;
}
#content {
width: auto;
float: none;
margin: 20px 0;
}
#sidebar {
width: 100%;
float: none;
margin: 0;
}
}
