media in CSS

သောကြာနေ့ကမှ CSS မှာ ထည့်ထည့်သုံးနေတဲ့ medai ဆိုတာ ဘာလဲဆိုတာကိုသိတော့တယ်။ ပုံမှန်အားဖြင့် media=”screen” ဆိုပြီး သုံးကြတာများပါတယ်။ CSS မှာ media=”screen” နဲ့ media=”print” ဆိုပြီး သုံးကြပါတယ်။ ပုံမှန် သမာရိုးကျ ကြည့်ရင်တော့ သိပ်မကွာခြားလှပေမယ့် ကွာပါတယ်။ အခြား media propertities တွေရှိသေးပါတယ်။ CSS မှာတော့ media ကို screen နဲ့ print ပဲ အသုံးပြုတယ်။

ပုံမှန် သမာရိုးကျ css တွေက သီးသန့်ရယ်လို့ ရေးတာ မရှိပါဘူး။ တကယ်လို့ ကိုယ့် site ကို print ထုတ်တဲ့အခါမှာ CSS တစ်မျိုး screen ပေါ်မှာကြည့်တဲ့အခါ CSS တစ်မျိုးနဲ့ ပေါ်ချင်တဲ့အခါမှာ အသုံးပြုတာပါ။

@media print
{
	body
	{
		background-color: #000;
		background-image: none;
		color: #FFF;
	}
}
@media screen
{
body
{
	color:#555555;
	font-family:Zawgyi-One,Helvetica,Arial,sans-serif;
	font-size:16px;
	background-image: url("../images/bg.jpg");
	background-repeat: repeat-x;
}
}

အဲလိုမျိုး CSS ထဲမှာ ရေးထားပြီး

<link href="http://localhost/MZ2/public/css/style.css" media="all" rel="stylesheet" type="text/css" />

လို့ခေါ်ရင် print ထုတ်တဲ့အခါမှာ မြင်ရတဲ့ CSS ပုံစံ နဲ့ Screen မှာ မြင်ရတဲ့ CSS က မတူတော့ပါဘူး။ တစ်ကိုယ်လို့ css ကို screen တစ်ခုအတွက်ပဲ သုံးချင်ရင် media=”screen” အနေနဲ့ သုံးလို့ရပါတယ်။

အောက်ကပုံမှာ ကြည့်ပါ။ browser မှာ စာပေါ်ပေမယ့် print preview မှာ စာမပေါ်ပါဘူး။ ဘာလို့လည်းဆိုတော့ screen နဲ့ print အတွက် body ကို သီးသန့်ခွဲရေးထားလို့ပါ။