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; } }