Kako napišete Media CSS?

Sintaksa za medijske poizvedbe min-width in max-width

Odzivno spletno oblikovanje je pristop k gradnji spletnih strani, kjer lahko te strani dinamično spremenijo svojo postavitev in videz glede na velikost zaslona obiskovalca . Veliki zasloni lahko prejmejo razporeditev, primerna za te večje zaslone, medtem ko manjše naprave, na primer mobilni telefoni, lahko prejmejo isto spletno mesto, oblikovano na način, ki je primeren za ta manjši zaslon. Ta pristop zagotavlja boljšo uporabniško izkušnjo za vse uporabnike in lahko celo pomaga izboljšati uvrstitev v iskalnik . Pomemben del odzivnega spletnega oblikovanja je CSS Media Queries.

Poizvedbe z mediji so v datoteki CSS vaše spletne strani všeč le majhne pogojne izjave, ki vam omogočajo, da določite določena pravila CSS, ki bodo vplivala šele, ko bo izpolnjen določen pogoj - na primer, če je velikost zaslona nad ali pod določenimi pragovi.

Medijske poizvedbe v akciji

Torej, kako uporabljate Media Queries na spletni strani? Tukaj je zelo preprost primer:

1. Začeli bi z dobro strukturiranim dokumentom HTML brez vizualnih stilov (to je tisto, za kar je CSS)
2. V vaši datoteki CSS bi začeli, kot običajno storite tako, da oblikujete stran in nastavite izhodišče za to, kako bo spletno mesto videti. Recite, da želite, da velikost pisave strani znaša 16 slikovnih pik, lahko napišete ta CSS: body {font-size: 16px; }
3. Zdaj boste morda želeli povečati velikost pisave za večje zaslone, ki imajo veliko nepremičnin. Tukaj začnite s Media Media Queries. Začeli boste s Media Query, kot je ta: @media zaslon in (min-width: 1000px) {}
4. To je sintaksa medijaške poizvedbe. Začne se z @media za vzpostavitev Media Query. Nato nastavite »vrsta medija«, ki je v tem primeru »zaslon«. To velja za namizne računalniške zaslone, tablične računalnike, telefone itd. Nazadnje končate medijsko poizvedbo s funkcijo »mediji«. V zgornjem primeru, to je "srednja širina: 1000 pik". To pomeni, da bo medijska poizvedba začela prikazovati s širino najmanj 1000 pik.

1. Po teh elementih medijske poizvedbe dodate odpiranje in zapiranje curly brace, podobno tistemu, ki bi ga naredili v katerem koli običajnem pravilniku CSS.
2. Zadnji korak do Media Query je dodati pravila CSS, ki jih želite uporabiti, ko je ta pogoj izpolnjen. Ta pravila CSS dodate med zavihke, ki sestavljajo medijsko poizvedbo, na primer: @media zaslon in (min-width: 1000px) {body {font-size: 20px; }
3. Ko so pogoji medijske poizvedbe izpolnjeni (okno brskalnika je široko vsaj 1000 slikovnih pik), bo ta slog CSS začel veljati, spreminjanje velikosti pisave na spletnem mestu iz 16 pik, ki smo jih prvotno določili, na novo vrednost 20 slikovnih pik.

Dodajanje več slogov

V tej Media Query-u lahko postavite čim več pravil CSS, kot je potrebno, da prilagodite videz vašega spletnega mesta. Če na primer želite povečati le velikost pisave na 20 slikovnih pik, spremenite barvo vseh odstavkov v črno (# 000000), to lahko dodate:

@media zaslon in (min-širina: 1000px) {body {font-size: 20px; } p {barva: # 000000; }}

Dodajanje dodatnih medijskih poizvedb

Poleg tega lahko dodate več medijskih poizvedb za vsako večjo velikost, tako da jih dodate na svoj slogovni list:

@media zaslon in (min-širina: 1000px) {body {font-size: 20px; } p {barva: # 000000; {} @media zaslon in (min-širina: 1400px) {body {font-size: 24px; }}

Prve medijske poizvedbe bi se širile s širino 1000 pik, s spreminjanjem velikosti pisave na 20 slikovnih pik. Potem, ko je bil brskalnik nad 1400 pik, se bo velikost pisave znova spremenila na 24 slikovnih pik. Lahko dodate toliko medijskih poizvedb, kot je potrebno za vaše spletno mesto.

Najmanjša širina in največja širina

Običajno obstajajo dva načina za pisanje medijskih poizvedb - z uporabo "min-width" ali "max-width". Do zdaj smo videli "min-širino" v akciji. To povzroči, da bodo medijske poizvedbe začele veljati, ko bo brskalnik dosegel vsaj to najmanjšo širino. Tako bo poizvedba, ki uporablja "min-width: 1000px", veljala, če je brskalnik širok vsaj 1000 pik. Ta slog Media Query se uporablja, ko gradite spletno mesto na način »mobilni prvi«.

Če uporabljate "max-width", deluje v nasprotnem primeru. Medijska poizvedba »max-width: 1000px« bi veljala, ko bo brskalnik padel pod to velikost.

Glede starejših brskalnikov

Eden izziv z Media Queries je pomanjkanje podpore v starejših različicah v Internet Explorerju. Na srečo obstajajo razpoložljive polifilije, ki lahko podpirajo medijske poizvedbe v tistih starejših brskalnikih, kar jim omogoča, da jih uporabljate na spletnih mestih, medtem ko še vedno zagotavljajo, da se prikazovanje tega spletnega mesta v starejši programski opremi brskalnika ne zdi prekinjeno.

Uredil Jeremy Girard dne 1/24/17