Artikulu direktorioa
Internet mugikorraren garapen gero eta handiagoarekin eta WeChat marketinaren erabilera zabalarekin, telefono mugikorrak bizitzako ezinbesteko tresna bihurtu dira .
Webgune txantiloietarako, WordPress gai erantzunkorrak erabiltzea gomendatzen dugu :
- WordPress gaiaren garatzaileak HTML 5 irudiaren pantaila moldagarria ondo egin ez badu WordPress gaiaren orria diseinatzerakoan...
- Webgunea gailu mugikor batean arakatzean, oso itsusia den irudien lerrokatze desegokia egongo da, eta erabiltzailearen esperientzia oso eskasa da!
Zer esan nahi du CSS irudi moldagarriak?
CSS irudi moldagarriak html web orrian irudiak egitea esan nahi du, CSS kodearen bidez:
- Automatikoki egokitu gailu desberdinen zabalera eta altuerara.
- img etiketa automatikoki proportzionalki eskalatzen da.
Ondoren, Chen Weiliangek irudi baten tamaina proportzionalki eskalatzeko CSS kodea partekatuko du zuekin. ^_^
CSS irudiaren altuera eta zabalera egokitzeko kodea
Txertatu irudia html-n:
Irudia zabaleran eta altueran finko egon beharrean pantailaren tamaina txikira egokitzea nahi baduzu.
Kode hau gehi dezakezu zure WordPress gaiaren style.css fitxategian ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }adierazpena hemenmax-widthgehienezko zabalera araua
- irudi guztiak gehienez % 100ean bistaratzen direla ziurtatzeko (hau da, beren irudiak bezain handiak soilik bistaratu daitezke).
- Une honetan, irudia duen elementua (adibidez, irudia duen gorputza edo div-a) irudiaren berezko zabalera baino txikiagoa bada, irudia eskalatuko da gehienez dagoen espazioa betetzeko.
width:auto;zabalera automatikoa esan nahi du
\9 Hack css idazteko modu bat da.
- Modu honetan, "\9" css kode arruntari gehitzen zaio, IE arakatzaileak bakarrik ezagutu dezake, beste nabigatzaile batzuek adierazpen hau baztertuko dute.
- Honek arakatzaileen bereizketa lortuko du, nabigatzaile bateragarrien helburua ahalbidetuz.
Zergatik ez erabili zabalera: %100?
Irudien eskalatze automatikoa lortzeko, erabili ohi diren zabalera-propietateak ere erabil ditzakezu, adibidez.width：100％.
Hala ere, arau hau ez da aplikatzen hemen.
- Arau honek bere edukiontzia bezain zabala agertuko duelako.
- Ontzia irudia baino askoz zabalagoa den kasuetan, irudia beharrik gabe luzatuko da.
注意 事项
Zer dira CSS hautatzaileak? Zein da klasearen eta idaren arteko aldea?Ondorengo tutorialek ▼-ri buruz hitz egiten dute
Nola egokitu orria mugikorreko webgunean MP4 bideoa erreproduzitzeko?Mesedez, egin klik beheko estekan ▼
Zorionez, Chen Weiliangeko blogean ( https://www.chenweiliang.com/ ) partekatutako "HTML 5 Irudien Tamaina Aldatzeko Kodea Pantailaren Tamaina eta Web Orrialdeen Tamaina Proportzionala Egokitzeko" artikulua lagungarria izango zaizu.
Anima zaitez artikulu honen esteka partekatzera: https://www.chenweiliang.com/cwl-964.html