Direttorju tal-Artikoli
Bl-iżvilupp qawwi tal-internet mobbli u l-użu mifrux tal -kummerċjalizzazzjoni WeChat , it-telefowns ċellulari saru għodda essenzjali fil -ħajja .
Għal mudelli ta' websajts, nirrakkomandaw li tuża temi responsive ta' WordPress :
- Jekk l-iżviluppatur tat-tema ta 'WordPress ma għamilx l-iskrin adattiv tal-immaġni HTML 5 tajjeb meta ddisinja l-paġna tat-tema ta' WordPress...
- Ibbrawżja l-websajt fuq apparat mobbli, se jkun hemm dislokazzjoni ta 'stampa ikrah ħafna, u l-esperjenza tal-utent hija fqira ħafna!
Xi jfisser CSS image adattivi?
Immaġini CSS adattivi tfisser li tagħmel l-immaġini fil-paġna web html, permezz tal-kodiċi CSS:
- jadattaw awtomatikament għall-wisa 'u l-għoli ta' apparati differenti.
- It-tikketta img hija awtomatikament skalata proporzjonalment.
Sussegwentement, Chen Weiliang se jaqsam magħkom il-kodiċi CSS għall-iskalar proporzjonalment tad-daqs ta' immaġni. ^_^
L-għoli tal-immaġini CSS u l-kodiċi adattivi tal-wisa'
Daħħal l-immaġni f'html:
Jekk trid li l-immaġni tadatta għad-daqs żgħir tal-iskrin minflok ma tibqa 'fissa fil-wisa' u l-għoli.
Tista 'żżid il-kodiċi li ġej mal-fajl style.css tat-tema WordPress tiegħek ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }dikjarazzjoni hawnmax-widthregola tal-wisa' massimu
- biex jiġi żgurat li l-immaġini kollha jintwerew f'massimu ta' 100% (jiġifieri jistgħu jintwerew biss daqs l-immaġini tagħhom stess).
- F'dan il-punt, jekk l-element li fih l-immaġini (pereżempju, il-korp jew div li jkun fih l-immaġni) huwa iżgħar mill-wisa 'inerenti tal-immaġni, l-immaġni se tiġi skalata biex timla l-ispazju massimu disponibbli.
width:auto;tfisser wisa' awtomatiku
\9 Huwa mod ta 'kitba hack css.
- B'dan il-mod, "\9" huwa miżjud mal-kodiċi css normali, browser IE biss jista 'jirrikonoxxih, browsers oħra se jinjoraw din id-dikjarazzjoni.
- Dan se jikseb divrenzjar tal-browser, li jippermetti l-iskop ta 'browsers kompatibbli.
Għaliex ma tużax wisa ': 100%?
Biex tikseb skalar awtomatiku ta 'immaġini, tista' wkoll tuża l-proprjetajiet tal-wisa 'aktar użati b'mod komuni, eż.width：100％.
Madankollu, din ir-regola ma tapplikax hawnhekk.
- Minħabba li din ir-regola se tagħmilha wiesgħa daqs il-kontenitur tagħha.
- F'każijiet fejn il-kontenitur huwa ħafna usa 'mill-immaġni, l-immaġni se tiġġebbed bla bżonn.
注意 事项
X'inhuma s-seletturi tas-CSS? X'inhi d-differenza bejn il-klassi u l-id?It-tutorials li ġejjin jitkellmu dwar ▼
Kif tadatta l-paġna biex tilgħab vidjo MP4 fuq il-websajt mobbli?Jekk jogħġbok ikklikkja l-link hawn taħt ▼
Nispera li l-artiklu "HTML 5 Image Resizing Code for Adapting to Screen Size and Proportional Size in Web Pages" maqsum fuq il-blog ta' Chen Weiliang ( https://www.chenweiliang.com/ ) ikun ta' għajnuna għalik.
Ħossok liberu li taqsam il-link ta' dan l-artiklu: https://www.chenweiliang.com/cwl-964.html