Share
Ratele intrinseci reprezintă o abordare a extinderii și contractării elementelor de pe o pagină web, permițându-le să fie fluide, concomitent constrângându-și proporțiile. Thierry Koblentz a propus pentru prima dată această idee în 2009.
Acestea sunt frecvent utilizate în legătură cu videoclipul, deoarece nici lățimea sau înălțimea unui iframe (elementul utilizat în mod obișnuit la încorporarea conținutului video) nu se măsoară automat pentru site-urile web fluide.
Poveste lungă: videoclipul nu este recepționat în mod implicit.
Au fost facute imbunatatiri semnificative asupra subiectului. Cel mai faimos dintre acestea este articolul A List apart, al lui Thierry Koblentz, care sugerează că face multe lucruri poziție: relativă și câteva hack-uri pentru vechiul Internet Explorer și când ați terminat implementarea, ați adăugat zeci de linii de cod la marcajul și CSS-ul dvs. doar pentru a face un videoclip receptiv. Brrr!
Din fericire, avem acum acces la unitatea de dimensionare vw și atâta timp cât nu trebuie să suportați dispozitivele Android vechi sau IE8, este relativ sigur de utilizat.
Tot ce trebuie să facem este să stabilim lățimea iframei la 100% și apoi să stabilim înălțimea sa la următoarea formulă: (Raportul 100 *) vw.
În cazul majorității videoclipurilor YouTube, raportul dvs. va fi de 16: 9 (altfel este exprimat ca 9/16), astfel încât pentru a face un videoclip YouTube reactiv, utilizați următorul cod CSS:
iframe lățime: 100%; înălțime: 56.25vw; / * 100 * (9/16) * /
Acest lucru este făcut mai ușor atunci când utilizați un preprocesor precum Sass, LESS sau Stylus, deoarece puteți trece oricare dintre rapoartele pe care le doriți în timpul zborului. De exemplu, pentru un videoclip de 4: 3, puteți scrie:
lățimea iframei: 100% înălțime: (100 * (3/4)) vw
Ce se întâmplă dacă vrem să adăugăm o marjă sau o margine la ea? Se pare că aruncă totul de pe urma. Pentru a repara acest lucru, pur și simplu trebuie să adăugăm marginile și marginile noastre unui element de înfășurare și apoi să scădem limita de la înălțimea noastră folosind Calc. Adaugam afișare: blocare pentru noi iframe pentru al împiedica să creeze un gol în partea de jos a videoclipului.
.vid margine: limita 2rem: 30px lățimea roșie a iframe-ului roșu: 100% înălțime: calc ((100vw - 60px) * (9/16))
Următorul "gotcha" este ceea ce dacă vrem ca videoclipul nostru să se odihnească în interiorul unui container care acoperă doar 70% din fereastra de vizualizare? Simplu, schimbăm doar 100vw în funcția noastră calc 70vw.
Cam despre asta e! Videouri foarte ușor de recepționat. Pentru mai multe detalii privind rapoartele și unitățile VW, verificați CodePen-ul strălucitor al lui Jason Talbert.
Accentsconagua