Bygg en responsiv webbplats på en vecka: mediefrågor (del 4)

Innehåll

• 01. Lägga till mediefrågor
• 02. En mediefråges anatomi
• 03. En sak till ...
• 04. Välja brytpunkter
• 05. Justera våra miniatyrer
• 06. Inte bara bredd

• Kunskap som behövs: Mellanliggande CSS och HTML
• Kräver: Textredigerare, modern webbläsare, grafikprogramvara
• Projekttid: 1 timme (totalt 5 timmar)
• Supportfil

En relativt ny del av CSS-specifikationen, mediefrågor är utan tvekan den mest spännande aspekten av responsiv webbdesign och ett område som är moget för ytterligare experiment.

Efter att ha accepterat behovet av anpassningsbara layouter har vissa sett mediefrågor som ett sätt att eftermontera anpassningsbara layouter på befintliga webbplatser med fast bredd. Bland dem som har anammat lyhörda layouter har många gjort det från skrivbordets perspektiv, dolt innehåll och funktioner när visningsområdet minskar.

Under hela denna handledning har vi tagit ett alternativ, mobil först. Nu när vi ser ut att inkludera mediefrågor kan vi tänka på lägger till funktioner som skärmfastigheter ökar, säkert med vetskapen om att markeringen och designen som ligger till grund för vår webbplats ger en respektabel baslinje.

Idag kommer vi att gå bortom vår mönsterportfölj och bygga de enskilda sidorna som krävs för vår webbplats. Genom att göra det kommer vi att se hur mediefrågor konstrueras och implementera dem på ett riktigt lyhört sätt.

01. Lägga till mediefrågor

Med komponenterna i vår mönsterportfölj kompletta och arbetar utanför ramarna för vilken layout som helst, är det dags att flytta dem till de olika sidorna som utgör vår webbplats.

Vi börjar med vår hemsida. Från den skrivbordsorienterade designen kan vi se att i bredare visningsportar bör vår layout se ut enligt följande:

Med mätningar från vår design kan vi beskriva dokumentområdet i CSS enligt följande:

.dokument {
stoppning: 0 5%;
}
.main {
bredd: 74,242424242424%; / * 784/1056 * /
flyta till vänster;
}
.komplementär {
bredd: 22,727272727273%; / * 240/1056 * /
flyta: höger;
}

Som vi lärde oss i den andra delen av denna handledning använder vi följande formel för att beräkna procentuell bredd för dessa kolumner:

(mål / sammanhang) * 100 = resultat

När vi ändrar storlek på vår webbläsare ser vi att vår skrivbordslayout skalas från den minsta skärmen till den största. Naturligtvis, i små storlekar är kolumnerna för smala och linjelängderna så korta att innehållet är svårt att läsa. Vi vill bara ha denna layout när det finns tillräckligt med utrymme för att den ska fungera.

Det här är mediefrågor som kommer in. Om vi ​​antar att denna layout endast ska träda i kraft när webbläsaren är bredare än 768 pixlar kan vi lägga till följande CSS:

.dokument {
stoppning: 0 5%;
}
@media skärm och (min bredd: 768px) {
.main {
bredd: 74,242424242424%; / * 784/1056 * /
flyta till vänster;
}
.komplementär {
bredd: 22,727272727273%; / * 240/1056 * /
flyta: höger;
}
}

Nu när visningsområdet är smalare än 768 pixlar ignoreras allt i mediefrågan. Det ignoreras av alla webbläsare som inte stöder mediefrågor också.

02. En mediefråges anatomi

För att förstå vad som händer här, låt oss titta på hur en mediefråga är uppbyggd. Vi kan dela upp den i två delar:

• @media skärm: Den första delen av en mediefråga är Mediatyp. Du kanske känner igen denna syntax om du någonsin har inkluderat utskriftsstilar i din CSS. Du kan också känna igen typnamnet från media attribut på länk> element. Det beror på att båda accepterar den godkända uppsättningen mediatyper som finns i CSS 2.1-specifikationen.
• (min bredd: 768 pixlar): Den andra delen är fråga. Detta inkluderar funktion som ska ifrågasättas (i detta fall den minsta bredden på visningsområdet) och motsvarande värde att testa för (768 pixlar).

När vi pratar om lyhörd webbdesign finns det en tendens att fokusera på bredd, men det finns andra funktioner vi också kan testa:

• (min- | max-) bredd och (min- | max-) höjd: Dessa gör det möjligt för oss att fråga om bredden och höjden på visningsområdet (dvs. webbläsarfönstret).
• (min- | max-) enhetsbredd och (min- | max-) enhetshöjd: Dessa gör att vi kan fråga bredden på hela skärmen. Enligt min erfarenhet är det vanligtvis mer förnuftigt att basera layouter på visningsområdet snarare än på skärmen.
• orientering: Du kan omedelbart tänka på möjligheterna här; tänk på appar som visar olika innehåll baserat på din telefons orientering - detsamma är möjligt på webben.
• (min- | max-) bildförhållande: Detta gör att vi kan anpassa layouter baserat på förhållandet mellan webbläsarfönstret ...
• (min- | max-) enhet-bildförhållande: ... och detta gör att vi kan göra detsamma baserat på enhetens bildförhållande. Owen Gregory skrev en underbar artikel förra året som undersökte hur vi kan använda den här frågan för att knyta våra mönster till de enheter de visas på.
• (min- | max-) svartvitt: Vi kan också testa om en enhet har en svartvit skärm eller inte. Föreställ dig hur användbart det skulle vara om Amazons e-ink Kindle-enheter inte ljög och rapporterade sina skärmar som färg!

Den sista delen av vår fråga är möjligen den mest användbara. Genom att använda och, kan vi testa för flera funktioner i en fråga. Till exempel:

@media skärm och (min bredd: 768px) och (orientering: liggande) {
...
}

Som du kan se kan mediefrågor hjälpa oss att bygga ganska övertygande upplevelser - och jag har bara rört ytan. Om du letar efter lätt läsning vid sänggåendet kan du göra sämre än att läsa W3C-mediespecifikationen som beskriver alla funktioner vi kan testa för.

03. En sak till ...

Även om vi har inkluderat mediefrågor i vår CSS, kommer vi att märka att vår webbplats fortfarande återges som om skärmen var bredare än 768 pixlar om vi tittar på vår webbplats på en mobil enhet.

För att förstå varför detta händer måste vi ta en kort historielektion.

När den ursprungliga iPhone tillkännagavs 2007 var en av dess stora försäljningsställen möjligheten att surfa på den "riktiga webben", även om det innebar skrivbordsorienterade webbplatser med fast bredd som behövde klämmas ner för att passa på sin lilla skärm. IPhone kunde göra detta genom att rapportera att displayen var 980 pixlar bred, innan den skalade ner webbsidor för att passa sin 320 pixlar breda skärm.

Men iPhone introducerades före tillkomsten av responsiv design. Nu när författare utformar webbplatser som är utformade för mobil är den här funktionen mindre användbar. Tack och lov inkluderade Apple ett sätt att kringgå detta beteende, och eftersom det har antagits av andra tillverkare har det blivit nästan ett de facto standard. Det handlar helt enkelt om att lägga till en singel meta element till vår markering:

meta name = "viewport" content = "initial-scale = 1.0, width = device-width" />

Detta berättar visningsportmedvetna webbläsare att en webbplats inte ska skalas ned och att webbläsarens fönster ska behandlas på samma sätt som den totala enhetsbredden. När vi har lagt till den här raden visas vår webbplats med den avsedda layouten:

04. Välja brytpunkter

Låt oss återgå till vår mediefråga:

@media skärm och (min bredd: 768px) {
...
}

Värden som en layout anpassar sig till kallas ofta brytpunkter. Om du kommer ihåg sa jag i del två att användning av pixlar är en indikation på att jag inte svarar, men här har jag valt 768px, förmodligen för att det är bredden på en bekant enhet.

Istället för att välja brytpunkter baserat på egenskaperna hos populära enheter kan det vara mer effektivt att titta på värden som härrör från vårt innehåll, till exempel bekväma linjelängder för läsning eller maximal bildstorlek.

Eftersom vår typ är dimensionerad med hjälp av ems, verkar det förnuftigt för våra mediefrågor att använda ems också. Att göra det har faktiskt en ytterligare fördel. När en användare ändrar storlek på texten i webbläsaren kommer sidorna att anpassas för att använda mindre brytpunkter. Inte bara kommer vår webbplats att anpassas utifrån visningsportens storlek, utan också typsnittets storlek. Det var faktiskt först när jag såg Jeremy Keith demonstrera em-baserade mediefrågor som jag insåg hur kraftfulla de kunde vara.

Även om vår design kan ge en indikation på möjliga brytpunkter, är det bästa sättet att välja dem ofta genom experiment. Genom att justera bredden på webbläsarfönstret har jag bestämt mig för att 800 pixlar är en bra bredd för att växla till en mer komplex layout.

Hur uttrycker vi dock 800px i ems? Återigen kan vi använda vår formel, men vad är sammanhanget? När du beräknar ems för mediefrågor är sammanhanget alltid webbläsarens standardstorlek oavsett om detta värde har åsidosatts i din CSS. Denna standard är vanligtvis 16 pixlar, vilket ger oss:

800 / 16 = 50

Vi kan nu uppdatera vår mediefråga så här:

@media skärm och (min bredd: 50 em) {/ * 800px * /
...
}

05. Justera våra miniatyrer

Du kommer ihåg att vi i del 2 utformade våra miniatyrer för att vara lyhörda. Men när bilderna i dessa miniatyrer har nått sin fulla bredd, visas ett område med vitt utrymme till höger om varje bild. Återigen tillåter mediefrågor oss att fixa detta.

Här är vår ursprungliga CSS:

ol.media li.media-artikel {
bakgrundsfärg: #fff;
marginal: 0 4.16666666667% 4.16666666667% 0;
bredd: 47,91666666667%;
flyta till vänster;
}
ol.media li.media-item: nth-child (2n) {
marginal-höger: 0;
}

Den punkt där detta vita utrymme visas är precis som webbläsaren växer bredare än 560 pixlar.Vi väljer det här värdet för att byta till att visa tre miniatyrer per rad. Vi kan göra det genom att lägga till följande CSS:

@media skärm och (min bredd: 35 em) {
.media-artikel {
bredd: 30.612244897959%; / * 240/784 * /
marginal: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-artikel: nth-child (3n) {
marginal-höger: 0;
}
}

Observera att vi inte behöver skriva om alla stilar som krävs för miniatyren i denna mediefråga, bara de delar vi vill anpassa.

Om du ser denna ändring i webbläsaren kommer du att notera att det inte finns någon marginal till höger om varannan miniatyrbild. Detta beror på att följande CSS-regel fortfarande är aktiv:

ol.media li.media-item: nth-child (2n) {
marginal-höger: 0;
}

Vi måste ändra CSS i vår mediefråga för att återställa det värdet:

@media skärm och (min bredd: 35 em) {
.media-artikel {
bredd: 30.612244897959%; / * 240/784 * /
marginal: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-artikel: nth-child (2n) {
marginal-höger: 4,081632653061%;
}
.media-artikel: nth-child (3n) {
marginal-höger: 0;
}
}

När du skapar mediefrågor måste du alltid vara medveten om ärvsfrågor som detta.

06. Inte bara bredd

Det är viktigt att tänka på mediefrågor inte bara när det gäller bredd utan även andra variabler. Till exempel är videon på vår medieobjekt delvis dold när visningshöjden minskar. Vi har tekniken:

.media-objekt-omslag {
stoppning-botten: 56,25%;
bredd: 100%;
höjd: 0;
position: relativ;
}
@media-skärm och (max-höjd: 35 em) och (orientering: liggande) {/ * 560px * /
.media-objekt-omslag {
bredd: 60%;
stoppning-botten: 33,75%;
}
}

Jag har även inkluderat en orienteringsfråga för att finessera detta beteende ytterligare.

Vi kan följa ett liknande tillvägagångssätt för de andra delarna av vår design, byta i en större version av sidhuvudet och flytta navigeringslänkarna till toppen av sidan när det finns ledigt utrymme.

• Se vår responsiva hemsida
• Se vår responsiva mediasida

Och där har vi det! Vi har byggt en lyhörd webbplats - och med en dag kvar! Tja, inte riktigt. Flexibla layouter, bilder och mediefrågor är bara början på den responsiva designprocessen.

I morgon: I den sista delen av denna handledning går vi längre än responsiv webbdesign och tittar på hur vi kan bygga riktigt responsiva webbplatser.

Paul är en interaktionsdesigner baserad i Brighton, England. Han är lyckligast när han skapar enkla men engagerande gränssnitt som är infödda på webben.