HTML 5 image adaptive screen img proporttional scaling code maka ibe weebụ HTML XNUMX

Site na mmepe nke ịntanetị mkpanaka na ojiji mgbasa ozi WeChat , ekwentị mkpanaaka aghọwo ngwaọrụ dị mkpa ná ndụ .

Maka ndebiri weebụsaịtị, anyị na-akwado iji isiokwu WordPress na-aza ajụjụ:

Kedu ihe ngbanwe onyonyo CSS pụtara?

Ihe ngbanwe onyonyo CSS pụtara ime onyonyo dị na ibe weebụ html, site na koodu CSS:

Na-esote, Chen Weiliang ga-eso gị kerịta koodu CSS maka ịhazi nha onyonyo n'ụzọ kwekọrọ. ^_^

Koodu mgbanwe dị elu na obosara onyonyo CSS

Fanye onyonyo na html:

Ọ bụrụ na ịchọrọ ka onyinyo ahụ gbanwee na obere ihuenyo kama ịnọ na-edozi n'obosara na ịdị elu.

Ị nwere ike itinye koodu a na faịlụ style.css nke isiokwu WordPress gị ▼

/*图片自适应宽度和高度*/ 
img { max-width: 100%; height: auto; width: auto\9; width: auto; }

nkwupụta ebe amax-widthiwu obosara kacha

• iji hụ na egosipụtara ihe oyiyi niile na kacha 100% (ya bụ, a ga-egosipụta ha naanị ka nnukwu ihe oyiyi nke ha).
• N'oge a, ọ bụrụ na mmewere nwere ihe onyonyo a (dịka ọmụmaatụ, ahụ ma ọ bụ div nwere onyonyo a) pere mpe karịa obosara ihe onyonyo a, a ga-atụba onyonyo a iji mejupụta oghere kacha dị.

width:auto;pụtara akpaka obosara

\9 Ọ bụ ụzọ e si ede hack css.

• N'ụzọ dị otú a, a na-agbakwunye "\9" na koodu css nkịtị, naanị ihe nchọgharị IE nwere ike ịmata ya, ihe nchọgharị ndị ọzọ ga-eleghara nkwupụta a anya.
• Nke a ga-enweta ọdịiche ihe nchọgharị, na-eme ka ebumnuche nke ihe nchọgharị dakọtara.

Gịnị kpatara na ejighi obosara: 100%?

Iji nweta ihe onyonyo akpaka, ị nwekwara ike iji njirimara obosara ndị a na-ejikarị eme ihe, dịka ọmụmaatụ.width：100％.

Agbanyeghị, iwu a anaghị emetụta ebe a.

• N'ihi na iwu a ga-eme ka ọ pụta ìhè dị ka akpa ya.
• N'ọnọdụ ebe akpa ahụ dị obosara karịa ihe oyiyi ahụ, a ga-agbatị ihe oyiyi ahụ na-enweghị isi.

Cakpachara anya

Kedu ihe bụ CSS selectors? Kedu ihe dị iche n'etiti klas na id?Nkuzi ndị a na-ekwu maka ▼

🔗 Kedu ihe dị iche n'etiti klaasị CSS ahọpụtara na id? Ojiji id na klaasị na HTML

Olee otú mobile website-egwu MP4 video adaptive ka ibe?Biko pịa njikọ dị n'okpuru ▼

🔗 Kedu ka esi emeghari ibe weebụ H5 MP4 na ibe ahụ? Koodu HTML maka ịkpọ vidiyo na webụsaịtị mkpanaka