ဆောင်းပါးလမ်းညွှန်
မိုဘိုင်းအင်တာနက် ဖွံ့ဖြိုးတိုးတက်မှု မြန်ဆန်လာခြင်းနှင့် WeChat စျေးကွက်ရှာဖွေရေး ကို ကျယ်ကျယ်ပြန့်ပြန့် အသုံးပြုလာခြင်းနှင့်အတူ မိုဘိုင်းဖုန်းများသည် ဘဝတွင် မရှိမဖြစ် ကိရိယာတစ်ခု ဖြစ်လာခဲ့သည်။
ဝဘ်ဆိုက် တင်းပလိတ်များအတွက် WordPress responsive themes များကို အသုံးပြုရန် အကြံပြုအပ်ပါသည် ။
- WordPress theme developer သည် WordPress theme page ကို ဒီဇိုင်းဆွဲသည့်အခါ HTML 5 image adaptive screen ကို ကောင်းမွန်စွာ မဖန်တီးနိုင်ခဲ့ပါက...
- မိုဘိုင်းကိရိယာတစ်ခုပေါ်တွင် ဝဘ်ဆိုက်ကို ကြည့်ရှုသည့်အခါ အလွန်ရုပ်ဆိုးသော ရုပ်ပုံလွှာမှားယွင်းမှု ရှိမည်ဖြစ်ပြီး သုံးစွဲသူအတွေ့အကြုံသည် အလွန်ညံ့ဖျင်းပါသည်။
CSS image adaptive ဆိုတာ ဘာကို ဆိုလိုတာလဲ။
CSS image adaptive ဆိုသည်မှာ CSS ကုဒ်မှတဆင့် html ဝဘ်စာမျက်နှာတွင် ပုံများကို ပြုလုပ်ရန် ဆိုလိုသည်-
- မတူညီသော စက်များ၏ အကျယ်နှင့် အမြင့်ကို အလိုအလျောက် လိုက်လျောညီထွေဖြစ်အောင် ပြုလုပ်ပါ။
- img tag ကို အလိုအလျောက် အချိုးကျ ချိန်ညှိသည်။
နောက်တစ်ခုအနေနဲ့ Chen Weiliang က ပုံတစ်ပုံရဲ့ အရွယ်အစားကို အချိုးကျချိန်ညှိနိုင်တဲ့ CSS ကုဒ်ကို မျှဝေပေးပါမယ်။ ^_^
CSS ရုပ်ပုံ အမြင့်နှင့် အကျယ် အလိုက်သင့် ကုဒ်
html တွင် ပုံထည့်ပါ
ပုံအား အကျယ်နှင့် အမြင့်တွင် ပုံသေနေမည့်အစား စခရင်၏ သေးငယ်သော အရွယ်အစားနှင့် လိုက်လျောညီထွေဖြစ်အောင် ပြုလုပ်လိုပါက။
သင့် WordPress အပြင်အဆင် ▼ ၏ style.css ဖိုင်တွင် အောက်ပါကုဒ်ကို သင်ထည့်နိုင်သည်။
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }ကြေညာချက်ဒီမှာmax-widthအကျယ်ဆုံးစည်းမျဉ်း
- ပုံအားလုံးကို အများဆုံး 100% တွင်ပြသကြောင်းသေချာစေရန် (ဆိုလိုသည်မှာ ၎င်းတို့သည် ၎င်းတို့၏ကိုယ်ပိုင်ပုံများကဲ့သို့ ကြီးမားသောပုံများကိုသာ ပြသနိုင်သည်)။
- ဤအချိန်တွင်၊ ပုံပါရှိသော ဒြပ်စင် (ဥပမာ၊ ရုပ်ပုံပါရှိသော ကိုယ်ထည် သို့မဟုတ် div) သည် ပုံ၏ မွေးရာပါ အကျယ်ထက် သေးငယ်ပါက၊ ရရှိနိုင်သော အများဆုံးနေရာအား ဖြည့်ရန် ပုံအား အတိုင်းအတာဖြင့် ချိန်ညှိမည်ဖြစ်သည်။
width:auto;အလိုအလျောက် အကျယ်ကို ဆိုလိုသည်။
\9 ၎င်းသည် ဟက်ခ် css ရေးနည်းဖြစ်သည်။
- ဤနည်းအားဖြင့် "\9" ကို ပုံမှန် css ကုဒ်သို့ ပေါင်းထည့်လိုက်သည်၊ IE ဘရောက်ဆာကသာ ၎င်းကို မှတ်မိနိုင်ပြီး၊ အခြားဘရောက်ဆာများသည် ဤဖော်ပြချက်ကို လျစ်လျူရှုပါမည်။
- ၎င်းသည် တွဲဖက်သုံးနိုင်သော ဘရောက်ဆာများ၏ ရည်ရွယ်ချက်ကို ပံ့ပိုးပေးသည့် ဘရောက်ဆာ ကွဲပြားမှုကို ရရှိစေမည်ဖြစ်သည်။
အဘယ်ကြောင့် အကျယ်ကို 100% မသုံးရသနည်း။
ရုပ်ပုံများကို အလိုအလျောက် ချိန်ညှိခြင်းအောင်မြင်ရန်၊ အသုံးများသော အကျယ်ဂုဏ်သတ္တိများကိုလည်း အသုံးပြုနိုင်သည်။ ဥပမာ။width：100％။
သို့သော် ဤစည်းမျဉ်းသည် ဤနေရာတွင် မသက်ဆိုင်ပါ။
- ဘာကြောင့်လဲဆိုတော့ ဒီစည်းမျဉ်းက ကွန်တိန်နာကို ကျယ်ကျယ်ပြန့်ပြန့် ပေါ်လာစေလိမ့်မယ်။
- ပုံသဏ္ဍာန်ထက် များစွာကျယ်သော ကွန်တိန်နာသည် ရုပ်ပုံအား မလိုအပ်ဘဲ ဆွဲဆန့်သွားမည်ဖြစ်သည်။
ကြိုတင်ကာကွယ်မှုများ
CSS ရွေးချယ်မှုများသည် အဘယ်နည်း။ class နဲ့ id ကွာခြားချက်ကဘာလဲ။အောက်ပါသင်ခန်းစာများတွင် ▼ အကြောင်းပြောပါမည်။
မိုဘိုင်းဝဘ်ဆိုက်တွင် MP4 ဗီဒီယိုကို ဖွင့်ရန် စာမျက်နှာကို မည်သို့ လိုက်လျောညီထွေဖြစ်အောင် လုပ်မည်နည်း။▼ အောက်ပါလင့်ကိုနှိပ်ပါ။
Chen Weiliang ရဲ့ဘလော့ဂ် ( https://www.chenweiliang.com/ ) မှာ မျှဝေထားတဲ့ "HTML 5 Image Resizing Code for Adapting to Screen Size and Proportional Size in Web Pages" ဆောင်းပါးက သင့်အတွက် အထောက်အကူဖြစ်လိမ့်မယ်လို့ မျှော်လင့်ပါတယ်။
ဒီဆောင်းပါးလင့်ခ်ကို မျှဝေပေးဖို့ မတွန့်ဆုတ်ပါနဲ့- https://www.chenweiliang.com/cwl-964.html