ဒီအပတ် အားရင် Design အသစ် ပြန်ရေးမယ်လို့ စဉ်းစားထားတယ်။ ဘာကြောင့်လဲဆိုတော့ CSS3 media queries ကို သဘောကျသွားလို့။ လက်ရှိ blog design က 960gs နဲ့ ရေးထားတော့ css3 media queries နဲ့ သုံးရင် သုံးလို့ ရပေမယ့် လုံးမဝ မလှပ မသေသပ်ဘူးဖြစ်နေတယ်။ WPTouch ကို မသုံးဘူးလားဆိုတော့ မသုံးချင်တော့ဘူး။ WPTouch လိုမျိုး force လုပ်ပြီးတော့ မတူညီတဲ့ Design ၂ မျိုးနဲ့ မပြချင်တော့ဘူး။ mobile site လည်း ဒီပုံစံပဲ မူရင်း site လည်း ဒီပုံမျိုးပဲ ပြချင်တယ်။ အရင်ကတည်းက အဲလိုမျိုး ဖန်တီးချင်ပေမယ့် theme ၂ ခု ဆွဲရမှာ ပျင်းနေတာကြောင့် မဆွဲဖြစ်ခဲ့ဘူး။ Google Reader မှာ သတင်းတွေ ဖတ်ရင်းနဲ့ catswhocode မှာ ရေးထားတဲ့ CSS3 media queries လေးတွေ့ပြီး စိတ်ဝင်စားသွားတယ်။ အရင်တုန်းက Smashing Magazine မှာ ရေးခဲ့ဖူးပေမယ့် မသိလိုက်ဘူး။
CSS3 media queries ဆိုတာက device width ပေါ်မှာ မူတည်ပြီး css တွေကို သတ်မှတ်တာပါ။ device width ဘယ်လောက် အတွင်းမှာဆို ဘယ် css သုံး။ ဘယ်လောက်မှာ ဆို ဘယ် css သုံး ဆိုပြီး သတ်မှာတာပါ။ ဥပမာ။။ iOS အတွက်ဆိုရင် max-width က 480px ပဲ ရှိမယ်။ ဒါကြောင့် max-width 480 ဆိုရင် ဆိုပြီး ရေးပေးလို့ရတယ်။ နောက်တနည်းက iPhone မှာ max-width 320 နဲ့ 480 ၂ မျိုးပဲ ရှိတယ်။ ဒါကြောင့် ၂ ခု ထပ်ခွဲပြီး ရေးချင်ရင် ရေးလို့ရတယ်။ ကျွန်တော် တို့ အရင်တုန်းက ကြုံဖူးမှာပါ။ background မှာ image ထည့်ချင်တယ်။ ဒါပေမယ့် image က monitor site ကို မသိဘူး။ ဒါကြောင့် tileimage တွေ ဖြစ်တာတွေ ရှိသလို အချို့တွေကလည်း fluid ဖြစ်အောင် div layer နဲ့ ဆွဲဆန့်တာတွေ ရှိပါတယ်။ သို့ပေမယ့် user အသုံးပြုမယ့် monitor size ကို မသိတာကြောင့် background image ဘယ်လောက် သုံးရမလဲဆိုတာကို ဝေခွဲ မရခဲ့ဘူး။ အဲဒီ ပြဿနာတွေကို css 3 media queries နဲ့ ဖြေရှင်းလို့ရသွားပါပြီ။
CSS 3 media queries ကို ဘယ်လို ရေးရသလဲဆိုတော့ ရိုးရိုး css မှာရေးသလိုပါပဲ။
ပထမ လိုင်းမှာ max-width က 480px ဖြစ်ခဲ့ရင် ဘယ်လို လုပ်မယ်ဆိုတဲ့ condition ။ နောက်တစ်ခုကတော့ 320 ဖြစ်ခဲ့ရင် ဘယ်လို လုပ်မယ်ဆိုတဲ့ condition ။ နောက်ဆုံး တစ်ခုက 1200 နဲ့ 1800 ကြားမှာဆိုရင် ဘယ်လို လုပ်မယ်ဆိုတဲ့ css တွေကို ထည့်ထားပါတယ်။ လက်ရှိ blog ကိုလည်း wptouch ကို ဖြုတ်လိုက်ပြီးတော့ media queries နဲ့ ပြန်ရေးထားတယ်။ စမ်းချင်တယ်ဆိုရင် iphone မရှိလည်း screen ကို ကိုယ့်ဘာသာ ကိုယ် resize လုပ်ပြီး ကြည့်နိုင်တယ်။ width: 480px ရောက်သွားတဲ့အခါမှာ css က အလိုလို ပြောင်းသွားတာကို တွေ့ရပါလိမ့်မယ်။ အသေးစိတ် လေ့လာချင်တယ်ဆိုရင်တော့ webdesignerwall မှာ ရေးထားတဲ့ tutorial လေးက တော်တော် ကောင်းပါတယ်။ wordpress အတွက် အရန်သင့် theme လေးကို သုံးချင်တယ်ဆိုရင်တော့ Renova လေးက တော်တော်ကောင်းပါတယ်။
bro is that work with other WordPress theme like mine, YOO theme studio??
And where to fix those coding?
you need to write yourself for css3 media queries. just write css no need programming.
Yunghkio font က NumLock တွေ သုံးမရဘူးနော်။ သုံးလို့ရချင်ပါတယ်။ အဆင်ပြေရင် ဖြေကြားပေးစေချင်ပါတယ်။
I don’t know about that. Ask in http://www.mysteryzillion.org
ကျွန်တော်သိပ်မသိဘူး။ adaptive fluid layout ကိုပြောတာလားမသိဘူး။ NetTuts မှာလို
may be. css media queries , no need javascript. just in css.
i’ve made a new css file in my theme folder. But it still doesn’t work.
what is your website ? did you reduce the screen size ? did you add the css in header ? Please ask in http://www.mysteryzillion.org
အကို ကျွန်တော့ ဆိုဒ်က စာတွေကို screen size ပြောင်းလိုက်ရင် လည်း လိုက်ပြောင်းတယ်။ ဒါပေမဲ့ ပေါ်က logo (IT-KOKO.info) က size အသေးသွားဘူး… screen size ပြောင်းလည်းလိုက်မပြောင်းဘူး… ဘယ်လိုလုပ်ရမလဲပြောပေးပါလား..
(it-koko(dot)info
ကျွန်တော် ကြည့်ရသလောက်တော့ Logo က သေးနေတာပဲ တွေ့တယ်။ media queries မှာ screen size အတွက် image width ကိုပါ ချိန်ညှိထားပေးဖို့ လိုပါတယ်။ ဒါမှသာ image width လိုက်ပြီး ပြောင်းသွားမှာပါ။
ဥပမာ။
@media screen and (max-width:320px){
#header img.logo { width: 100px }
}