Link to Style Sheets for mobile phone
အခုေနာက္ပိုင္းမွာ mobile phone ေတြ လူသံုးမ်ားလာတဲ့ အညီ css ကိုလည္း mobile ေတြေပၚမွာ ေကာင္းစြာ ေပၚေအာင္ ျပဳျပင္ေရးဆြဲရပါတယ္။
<!DOCTYPE html>
<html>
<head>
<title>Media</title>
<link rel="stylesheet" type="text/css" href="ipad-style.css" meida="only screen and (max-device-width: 1024px)">
<link rel="stylesheet" type="text/css" href="iphone-style.css" meida="only screen and (max-device-width: 480px)">
</head>
<body>
<h1>Media-specific Style Sheets</h1>
<p class="special">Sample Text. Blue for screen and purple for print.
</body>
</html>အထက္ပါ code မွာ meida="only screen and (max-device-width: 1024px)" နဲ႕ meida="only screen and (max-device-width: 480px)" ဆုိတာကို ေတြ႕ႏိုင္ပါတယ္။
max-device-width ဆုိတာကေတာ့ device width ရဲ႕ အျမင့္ဆံုး အရြယ္အစားဆုိရင္ ဒီ style ကို အသံုးျပဳဆိုျပီး ေရးသားထားတာပါ။ ipad ရဲ႕ အက်ယ္ဆံုး device width က 1024 ပါ။ iPhone ရဲ႕ ေဒါင္လိုက္ အရြယ္မွာ အက်ယ္ဆံုးကေတာ့ 480px ပါ။ max-device-wdith မွာ ထည့္ထားတဲ့ width ေရာက္မွသာ အဲဒီ css က အလုပ္လုပ္မွာ ျဖစ္ပါတယ္။ တျခားအခ်ိန္ေတြမွာေတာ့ အလုပ္မလုပ္ေပးပါဘူး။
တကယ္လုိ႕ ကၽြန္ေတာ္တုိ႕ေတြ အေနနဲ႕ css file မွာ media quries ကို အသံုးျပဳခ်င္ရင္ ေအာက္ကလို အသံုးျပဳႏိုင္ပါတယ္။
//default CSS
.special {
color: blue;
}
@media screen {
.special {
color:blue
}
}
@media print {
.special {
color:purple;
}
}
//for iphone
@media screen and (max-device-width: 480px) {
.special {
color :red;
}
}
//for iphone
@media screen and (max-device-width: 1024px) {
.special {
color :green;
}
}အထက္ပါ code ေလးက လြယ္လြယ္ကူကူနဲ႕ ရွင္းရွင္းလင္းလင္း နားလည္ႏိုင္ပါတယ္။ အထက္ပါ code မွာ screen , print နဲ႕ iphone , iPad တုိ႕အတြက္ css ေတြ အကုန္ ေပါင္းေရးထားေပးပါတယ္။ media quries ေရးတဲ့ အခါမွာ { နဲ႕ စျပီးေတာ့ } နဲ႕ ဆံုးပါတယ္။ အဲဒီ ၾကားထဲမွာ သက္ဆိုင္တဲ့ CSS ကို ေရးေပးဖို႕လိုပါတယ္။