Share
Intrinsic forhold er en tilnærming til å utvide og kontraherende elementer på en nettside, slik at de kan være flytende samtidig som de begrenser deres proporsjoner. Thierry Koblentz foreslo først ideen tilbake i 2009.
De brukes ofte i forbindelse med video, siden verken bredden eller høyden på en iframe (elementet som vanligvis brukes når du legger inn videoinnhold) ikke skaleres automatisk for flytende nettsteder.
Lang historie kort: video er ikke responsiv som standard.
Store oppskrivninger har blitt gjort om emnet. Den mest berømte som er Thierry Koblentzs A List Apart-artikkel som antyder å gjøre mange ting med stilling: relativ og noen hacker for gammel Internet Explorer, og når du er ferdig med å implementere den, har du lagt til mange titalls kodelinjer til markeringen din og CSS bare for å gjøre en video responsiv. argh!
Heldigvis har vi nå tilgang til vw-størrelsesenheten, og så lenge du ikke trenger å støtte gamle Android-enheter eller IE8, er det relativt trygt å bruke.
Alt vi trenger å gjøre er å sette iframes bredde til 100% og sett deretter høyden til følgende formel: (100 * forhold) vw.
For de fleste YouTube-videoer er forholdet ditt 16: 9 (ellers uttrykt som 9/16), slik at du kan gjøre en YouTube-video-responsiv, bruk følgende CSS-kode:
iframe bredde: 100%; høyde: 56,25vw; / * 100 * (9/16) * /
Dette gjøres enda enklere når du bruker en preprosessor som Sass, LESS eller Stylus, da du kan passere hvilke forhold du vil ha på fluen. For eksempel, for en 4: 3-video, kan du skrive:
iframe bredde: 100% høyde: (100 * (3/4)) vw
Hva skjer hvis vi vil legge til en margin eller kantlinje for det? Det ser ut til å kaste alt ut av whack. For å fikse det, må vi bare legge til grensen og margene til et innpakningselement, og deretter trekke grensen fra vår høyde ved å bruke calc. Vi legger til skjerm: blokk til vår iframe for å holde det fra å skape et gap på bunnen av videoen.
.vid margin: 2rem border: 30px solid rød iframe bredde: 100% høyde: calc ((100vw - 60px) * (9/16)) display: blokk
Den neste "gotcha" er hva hvis vi vil at videoen skal ligge inne i en beholder som bare spenner over 70% av visningsporten? Enkelt, vi endrer bare 100vw i vår kalkfunksjon til 70vw.
Det er alt der er til det! Super lett responsive videoer. For flere detaljer om forhold og vw-enheter, sjekk ut Jason Talberts briljante CodePen.
Accentsconagua