အခုေနာက္ပိုင္းမွာ 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 ကို ေရးေပးဖို႕လိုပါတယ္။

results matching ""

    No results matching ""