Inhalt
- 01. Dobäi Medieufroen
- 02. Anatomie vun enger Medie-Ufro
- 03. Eng weider Saach ...
- 04. Breakpoints wielen
- 05. Eis Miniaturen upassen
- 06. Net nëmme Breet
- Wëssen néideg: Mëttelstuf CSS an HTML
- Verlaangt: Texteditor, modernen Browser, Grafiksoftware
- Projet Zäit: 1 Stonn (5 Stonnen total)
- Ënnerstëtz Datei
E relativ neien Deel vun der CSS Spezifizéierung, Medienufroen sinn zweifellos dee spannendsten Aspekt vum reaktiounsfäege Webdesign an e Gebitt dat reift fir weider Experimenter.
Nodeems se de Besoin u adaptiven Layouten akzeptéiert hunn, hunn e puer Medieufroen als Mëttel gesinn fir adaptiv Layouten op nei existent Festbreet Site nei opzebauen. Ënnert deenen, déi reagéiert Layouten ugeholl hunn, hunn et vill aus der Perspektiv vum Desktop gemaach, Inhalt a Feature verstoppt wéi de Viewport enker ass.
Während dësem Tutorial hu mir eng alternativ, mobil éischt Approche geholl. Elo, wa mir kucken fir Medienufroen opzehuelen, kënne mir iwwer denken derbäi Features wéi Écran Immobilien eropgoen, sécher am Wëssen datt d'Markup an den Design, deen eise Site ënnerstëtzt, eng respektabel Basislinn gëtt.
Haut wäerte mir iwwer eise Musterportefeuille réckelen an déi eenzel Säiten, déi fir eis Websäit erfuerderlech sinn, bauen. Dobäi wäerte mir kucken wéi Medienufroen konstruéiert sinn, an se op eng reaktiounsfäeg Manéier ëmsetzen.
01. Dobäi Medieufroen
Mat de Komponenten an eisem Musterportefeuille komplett a schaffen ausserhalb vun de Grenzen vun all Layout, ass et Zäit se op déi verschidde Säiten ze plënneren, déi eise Site ausmaachen.
Mir fänke mat eiser Homepage un. Aus dem Desktop-orientéierten Design kënne mir gesinn datt a breetem Viewports eise Layout soll folgend erschéngen:
Maacht Miessunge vun eisem Design, kënne mir d'Dokumentgebitt am CSS wéi folgend beschreiwen:
.dokument {
padding: 0 5%;
}
.main {
Breet: 74.242424242424%; / * 784/1056 * /
schwammen: lénks;
}
.komplementär {
Breet: 22.727272727273%; / * 240/1056 * /
schwammen: riets;
}
Wéi mir am zweeten Deel vun dësem Tutorial geléiert hunn, benotze mir déi folgend Formel fir d'Prozentbreet vun dëse Säulen ze berechnen:
(Zil / Kontext) * 100 = Resultat
Wa mir eis Browser änneren, wäerte mir gesinn datt eis Desktop Layout vun der klengster Gréisst Écran op de gréissten ass. Natierlech, a klenge Gréissten sinn d'Säulen ze schmuel an d'Linnelängt sou kuerz datt den Inhalt schwéier ze liesen ass. Mir wëllen dëse Layout nëmmen wann et genuch Plaz ass fir et ze schaffen.
Dëst ass wou Medien Ufroen erakommen. Unzehuelen datt dëse Layout nëmmen a Kraaft trëtt wann de Browser méi breet wéi 768px ass, kënne mir de folgenden CSS bäifügen:
.dokument {
padding: 0 5%;
}
@media Écran an (min Breet: 768px) {
.main {
Breet: 74.242424242424%; / * 784/1056 * /
schwammen: lénks;
}
.komplementär {
Breet: 22.727272727273%; / * 240/1056 * /
schwammen: riets;
}
}
Elo, wann de Viewport méi schmuel ass wéi 768px, gëtt alles an der Medie-Ufro ignoréiert. Et gëtt ignoréiert vun all Browser deen och net Medieufroen ënnerstëtzt.
02. Anatomie vun enger Medie-Ufro
Fir ze verstoen wat hei geschitt, kucke mer wéi eng Medienufro opgebaut ass. Mir kënnen et an zwee Deeler deelen:
- @media Écran: Den éischten Deel vun enger Medienufro ass den Medientyp. Dir kënnt dës Syntax erkennen wann Dir jeemools Dréckstiler an Ärem CSS abegraff hutt. Dir kënnt och den Typnumm vun der erkennen Medien Attribut op der Link> Element. Dat ass well béid déi guttgeheescht Satz vu Medietypen akzeptéieren, déi an der CSS 2.1 Spezifizéierung fonnt ginn.
- (min Breet: 768px): Den zweeten Deel ass den Ufro. Dëst beinhalt den Feature ze froen (an dësem Fall déi Mindestbreet vum Viewport) an déi entspriechend Wäert fir ze testen (768px).
Wa mir iwwer reaktiounsfäeger Webdesign schwätzen, ass et eng Tendenz op d'Breet ze konzentréieren, awer et ginn aner Features déi mir och kënnen testen:
- (min- | max-) Breet an (min- | max-) Héicht: Dës erlaabt eis d'Breet an d'Héicht vum Viewport (dh d'Browserfenster) ze froen.
- (min- | max-) Gerät Breet an (min- | max-) Gerät Héicht: Dës erlaben eis d'Breet vum ganze Display ze froen. A menger Erfahrung ass et normalerweis méi sënnvoll fir Layouten op der Viewport ze baséieren anstatt um Display.
- Orientéierung: Dir kënnt direkt un d'Méiglechkeeten denken hei; denkt un Apps déi verschidden Inhalter weisen baséiert op der Orientéierung vun Ärem Handy - datselwecht ass méiglech um Internet.
- (min- | max-) Aspekt-Verhältnis: Dëst erlaabt eis Layouten unzepassen baséiert op dem Verhältnis vun der Browserfenster ...
- (min- | max-) Gerät-Aspekt-Verhältnis: ... an dëst erlaabt eis datselwecht ze maachen op Basis vum Aspekt-Verhältnis vum Apparat. Den Owen Gregory huet d'lescht Joer e wonnerschéinen Artikel geschriwwen deen exploréiert wéi mir dës Ufro benotze kënnen fir eis Designs un d'Apparater ze bannen, op déi se erschéngen.
- (min- | max-) monochrom: Mir kënnen och testen ob en Apparat e Monochrom Display huet oder net. Stellt Iech vir wéi nëtzlech dëst wier wann Amazon's e-ink Kindle Geräter net léien an hir Bildschirmer als Faarf mellen!
De leschten Deel vun eiser Ufro ass méiglecherweis deen nëtzlechsten. Andeems Dir benotzt an, mir kënne fir verschidde Funktiounen an enger Ufro testen. Zum Beispill:
@media Écran an (min Breet: 768px) an (Orientéierung: Landschaft) {
...
}
Wéi Dir kënnt gesinn, kënne Medienufroen eis hëllefen zimlech iwwerzeegend Erfahrungen ze bauen - an ech hunn nëmmen d'Uewerfläch beréiert. Wann Dir e bësse Liichtbettliesung sicht, kënnt Dir méi schlecht maachen wéi d'W3C Medien Ufro Spezifikatioun ze liesen déi all d'Features beschreift déi mir testen.
03. Eng weider Saach ...
Och wa mir Medienufroen an eisem CSS abegraff hunn, wa mir eise Site op engem mobilen Apparat kucken, da mierkt Dir datt eise Site nach ëmmer gemaach gëtt wéi wann d'Display méi breet wéi 768px wier.
Fir ze verstoen firwat dat geschitt, musse mir eng kuerz Geschichtcourse maachen.
Wéi den ursprénglechen iPhone am Joer 2007 ugekënnegt gouf, war ee vu senge grousse Verkafspunkte d'Fäegkeet de 'richtege Web' ze duerchsichen, och wann dat mat feste Breet Desktop-orientéierte Säite bedeit, déi erofgedréckt musse ginn, fir op sengem klengen Ecran ze passen. Den iPhone konnt dëst maachen andeems en säin Display als 980px breet bericht, ier e Webseiten erofgréisst fir säin 320px-breede Bildschierm ze passen.
Awer den iPhone gouf viru der Entstoe vu responsiven Design agefouert. Elo datt d'Autoren Siten entwéckele fir mobil ze entwéckelen, ass dës Feature manner nëtzlech. Glécklecherweis huet Apple e Mëttel abegraff fir dëst Verhalen ze ëmgoen, a well et vun anere Produzenten ugeholl gouf, ass et bal e ginn de facto Standard. Et geet einfach drëm eng Single bäizefügen meta Element fir eis Markup:
meta name = "viewport" content = "initial-scale = 1.0, width = device-width" />
Dëst erzielt Viewport-bewosst Browser datt eng Websäit net soll erofgeschrauft ginn, an datt d'Breet vun der Browserfenster d'selwecht behandelt gëtt wéi d'Gesamtapparat Breet. Wann mir dës Zeil derbäigesat hunn, wäert eis Websäit mam gewënschte Layout erschéngen:
04. Breakpoints wielen
Komme mer zréck op eis Medienufro:
@media Écran an (min Breet: 768px) {
...
}
Wäerter mat deenen e Layout upasst ginn allgemeng als Breakpoints bezeechent. Wann Dir Iech erënnert, am Deel zwee hunn ech gesot datt d'Benotzung vu Pixel eng Indikatioun vun net reagéiertem Denken ass, awer hei hunn ech 768px gewielt, wahrscheinlech well et d'Breet vun engem vertrauten Apparat ass.
Amplaz Breakpoints ze wielen op Basis vun de Charakteristike vu populäre Geräter, kann et méi effektiv sinn Wäerter ze kucken déi aus eisem Inhalt ofgeleet sinn, zum Beispill bequem Zeillängt fir ze liesen oder déi maximal Gréisst vun engem Bild.
Mat eisem Typ dee mat EMS Gréisst ass, schéngt et sënnvoll fir eis Medienufroen och EMS ze benotzen. Tatsächlech dat ze maachen huet en zousätzleche Virdeel. Wann e Benotzer d'Gréisst vum Text am Browser ännert, ginn d'Säiten adaptéiert fir méi kleng Breakpoints ze benotzen. Net nëmme wäert eis Websäit op Basis vun der Gréisst vum Viewport adaptéieren, awer och d'Gréisst vun der Schrëft. Tatsächlech war et just wéi ech den Jeremy Keith gesinn em-baséiert Medienufroen demonstréieren datt ech gemierkt hunn wéi staark se kéinte sinn.
Och wann eisen Design e puer Indikatiounen iwwer méiglech Breakpoints liwwert, ass dacks de beschte Wee fir se ze wielen duerch Experimenter. Andeems ech d'Breet vun der Browserfenster ugepasst hunn, hunn ech decidéiert datt 800px eng gutt Breet ass, fir datt se op e méi komplexe Layout wiesselen.
Wéi drécke mir 800px an Ems aus? Elo kënne mir eis Formel benotzen, awer wat ass de Kontext? Beim Berechnen vun EMS fir Medienufroen ass de Kontext ëmmer d'Standard Schrëftgréisst vum Browser egal ob dëse Wäert an Ärem CSS iwwerschriwwe gouf. Dëse Standard ass typesch 16px, wat eis gëtt:
800 / 16 = 50
Mir kënnen elo eis Medienufro aktualiséieren esou:
@media Écran an (min Breet: 50em) {/ * 800px * /
...
}
05. Eis Miniaturen upassen
Dir wäert Iech drun erënneren datt am Deel 2 mir eis Thumbnails gestylt hunn fir ze reagéieren. Awer nodeems d'Biller an dësen Thumbnails hir ganz Breet erreechen, schéngt e Gebitt vu wäisse Raum riets vun all Bild. Erëm, Medienufroen erlaben eis dëst ze fixéieren.
Hei ass eisen originellen CSS:
ol.media li.media-item {
Hannergrondfaarf: #fff;
Spillraum: 0 4.16666666667% 4.16666666667% 0;
Breet: 47.91666666667%;
schwammen: lénks;
}
ol.media li.media-item: nth-child (2n) {
Spillraum-riets: 0;
}
De Punkt op deem dëse wäisse Raum erschéngt ass just wéi de Browser méi breet gëtt wéi d'560px.Mir wäerte dëse Wäert wielen, fir ze wiesselen fir dräi Miniaturen pro Zeil ze weisen. Mir kënnen dat maachen andeems Dir folgend CSS bäifüügt:
@media Écran an (min Breet: 35em) {
.media-Element {
Breet: 30.612244897959%; / * 240/784 * /
Spillraum: 0 4,081632653061% 1,1429 em 0; / * 0 32/784 16px 0 * /
}
.media-Element: nth-Kand (3n) {
Spillraum-riets: 0;
}
}
Bedenkt datt mir net all d'Stiler fir den Thumbnail bannent dëser Medie-Ufro ëmschreiwe mussen, nëmmen déi Deeler déi mir eis upasse wëllen.
Wann Dir dës Ännerung am Browser kuckt, wäert Dir bemierken datt et keng Margin riets vun all zweeter Thumbnail ass. Dëst ass well déi folgend CSS Regel nach ëmmer aktiv bleift:
ol.media li.media-item: nth-child (2n) {
Spillraum-riets: 0;
}
Mir musse den CSS an eiser Medienanfrage änneren fir dëse Wäert zréckzesetzen:
@media Écran an (min Breet: 35em) {
.media-Element {
Breet: 30.612244897959%; / * 240/784 * /
Spillraum: 0 4,081632653061% 1,1429 em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-Kand (2n) {
Spillraum-riets: 4,081632653061%;
}
.media-Element: nth-Kand (3n) {
Spillraum-riets: 0;
}
}
Wann Dir Medienufroen erstellt, sidd ëmmer bewosst iwwer Ierfschaftsproblemer wéi dës.
06. Net nëmme Breet
Et ass wichteg ze denken iwwer Medienufroen net nëmme wat d'Breet ugeet, awer och aner Variabelen. Zum Beispill ass de Video op eiser Medieartikel Säit deelweis verstoppt wann d'Héicht vun der Viewport erofgeet. Mir hunn d'Technologie:
.media-Objekt-Wrapper {
padding-ënnen: 56,25%;
Breet: 100%;
Héicht: 0;
Positioun: relativ;
}
@media Bildschierm an (max-Héicht: 35em) an (Orientéierung: Landschaft) {/ * 560px * /
.media-Objekt-Wrapper {
Breet: 60%;
padding-ënnen: 33,75%;
}
}
Ech hu souguer eng Orientéierungsufro mat agebaut fir dëst Verhalen weider ze finesséieren.
Mir kënnen eng ähnlech Approche fir déi aner Deeler vun eisem Design verfollegen, an eng méi grouss Versioun vum Header ëmtauschen an d'Navigatiounslinks no uewen op der Säit réckelen, nodeems de Raum verfügbar ass.
- Kuckt eis reagéiert Homepage
- Kuckt eis reagéiert Medien Element Säit
An do hu mer et! Mir hunn eng reaktiouns Websäit gebaut - a mat engem Dag ze spueren! Gutt, net ganz. Flexibel Layouten, Biller a Medienufroen ass nëmmen den Ufank vum reaktiounsfäegen Designprozess.
Muer: Am leschten Deel vun dësem Tutorial gi mir méi wäit wéi reaktiounsfäeger Webdesign a kucke wéi mir wierklech reaktiounsfäeg Websäite bauen.
De Paul ass en Interaktiounsdesigner mat Sëtz zu Brighton, England. Hien ass am glécklechsten wann Dir einfach awer engagéiert Interfaces bastelt déi um Internet gebuer sinn.
