Kako uporabiti medijske poizvedbe v HTML in CSS za ustvarjanje odzivnih spletnih mest

Če želite razviti spletna mesta / spletne aplikacije, je za vaš uspeh bistvenega pomena, kako ustvariti odzivne modele.

V preteklosti je bilo ustvarjanje spletnih mest, ki so se dobro prilagodile različnim velikostim zaslona, ​​razkošje, ki so ga morali lastniki spletnih strani zahtevati od razvijalca. Vendar pa je zaradi napredka pri uporabi pametnih telefonov in tabličnih računalnikov odziven dizajn postal nuja v svetu razvoja programske opreme.

Uporaba predstavnostnih poizvedb je najboljši način, da zagotovite, da se vaše spletno mesto / spletna aplikacija prikaže točno tako, kot želite v vsaki napravi.

Razumevanje odzivnega oblikovanja

Na kratko se odzivni dizajn ukvarja z uporabo HTML / CSS za ustvarjanje postavitve spletnega mesta / spletne aplikacije, ki se prilagodi različnim velikostim zaslona. V HTML / CSS obstaja nekaj različnih načinov za doseganje odzivnosti pri oblikovanju spletnega mesta:

• Uporaba enot rem in em namesto slikovnih pik (px)
• Nastavitev prikaza / obsega posamezne spletne strani
• Uporaba medijskih poizvedb

Medijska poizvedba je značilnost CSS, ki je bila izdana v različici CSS3. Z uvedbo te nove funkcije uporabniki CSS dobijo možnost prilagajanja prikaza spletne strani glede na višino, širino in usmerjenost naprave / zaslona (ležeči ali pokončni način).

Preberi več: Essential CSS3 Properties Cheat Sheet

Medijske poizvedbe zagotavljajo okvir za enkratno ustvarjanje kode in večkratno uporabo v celotnem programu. To se morda ne zdi tako koristno, če razvijate spletno mesto s samo tremi spletnimi stranmi, vendar če delate za podjetje s stotinami različnih spletnih strani - to se bo izkazalo za ogromen čas varčevalnik.

Pri uporabi medijskih poizvedb morate upoštevati več različnih stvari: struktura, umestitev, obseg in povezovanje.

Samo @media / ne vrsta medija in (izraz) {
/ * Koda CSS * /
}

Splošna struktura medijske poizvedbe vključuje:

• Ključna beseda @media
• Ne / edina ključna beseda
• Vrsta medija (ki je lahko zaslon, tisk ali govor)
• Ključna beseda "in"
• Edinstven izraz v oklepajih
• Koda CSS, zaprta v par odprtih in zaprtih zavitih oklepajev.

Sorodno: Uporaba CSS za oblikovanje dokumentov za tiskanje

Zaslon samo za @media in (največja širina: 450 slikovnih pik) {
telo {
barva ozadja: modra;
}
}

Zgornji primer uporablja slog CSS (natančneje modro barvo ozadja) samo za zaslone naprav s širino 450 px in manj - torej v bistvu pametne telefone. Ključno besedo »edino« je mogoče nadomestiti s ključno besedo »ne«, nato pa bi slog CSS v zgornji poizvedbi za medije veljal samo za tiskanje in govor.

Vendar privzeto splošna izjava o medijskih poizvedbah velja za vse tri vrste medijev, zato ni treba določiti vrste medija, razen če je cilj izključiti enega ali več.

/ * zasnova za pametne telefone * /
@media (največja širina: 450 slikovnih pik) {
telo {
barva ozadja: modra;
}
}

Medijska poizvedba je lastnost CSS; zato se lahko uporablja samo v jeziku za oblikovanje. Obstajajo trije različni načini za vključitev CSS v kodo; vendar le dve od teh metod zagotavljata praktičen način za vključitev medijskih poizvedb v vaše programe - notranji ali zunanji CSS.

Interna metoda vključuje dodajanje

Zunanja metoda vključuje ustvarjanje medijske poizvedbe v zunanji datoteki CSS in njeno povezavo z datoteko HTML prek datoteke oznaka.

Ne glede na to, ali se medijske poizvedbe uporabljajo prek notranjega ali zunanjega CSS-ja, obstaja en glavni vidik jezika za oblikovanje, ki lahko negativno vpliva na delovanje medijske poizvedbe. CSS ima pravilo prednostnega reda. Ko uporabljate a Izbirnik CSS, ali v tem primeru medijska poizvedba, vsaka nova medijska poizvedba, ki je dodana v datoteko CSS, preglasi (ali ima prednost pred tisto, ki je bila prej).

Privzeta koda za medijsko poizvedbo, ki jo imamo zgoraj, cilja na pametne telefone (širine 450 slikovnih pik in manj), zato, če želite nastaviti drugačno ozadje za tablične računalnike, za katere bi morda mislili, da lahko preprosto dodate naslednjo kodo v svojo obstoječo datoteko CSS.

/ * oblikovanje za tablete * /
@media (največja širina: 800 slikovnih pik) {
telo {
barva ozadja: rdeča;
}
}

Edina težava je v tem, da bi tablični računalniki zaradi prednostnega vrstnega reda imeli rdečo barvo ozadja, pametni telefoni pa bi zdaj imeli tudi rdečo barvo ozadja, ker je 450 in manj pod 800 pik.

Eden od načinov za rešitev te majhne težave bi bil dodati medijsko poizvedbo za tablične računalnike pred tistimi za pametne telefone; slednji bi preglasil prvega in zdaj bi imeli pametne telefone z modro barvo ozadja in tablice z rdečo barvo ozadja.

Vendar obstaja boljši način za ločeno oblikovanje pametnih telefonov in tabličnih računalnikov, ne da bi vas skrbel vrstni red. To je značilnost medijskih poizvedb, znanih kot specifikacija obsega, kjer lahko razvijalec ustvari medijsko poizvedbo z največjo in najmanjšo širino (obseg).

/ * oblikovanje za tablete * /
@media (največja širina: 800 slikovnih pik) in (najmanjša širina: 451) {
telo {
barva ozadja: rdeča;
}
}

Z zgornjim primerom postavitev medijskih poizvedb v tabelo slogi postane nepomembna, saj zasnova tabličnih računalnikov in pametnih telefonov cilja na dve ločeni zbirki širine.

Če ne želite v kodo CSS vdelati predstavnostnih poizvedb, lahko uporabite drug način. Ta metoda vključuje uporabo medijskih poizvedb v oznake datoteke HTML, zato namesto da bi imeli en masiven tabelo slogi, ki vsebuje nastavitve sloga za pametni telefoni, tablični računalniki in računalniki - lahko uporabite tri ločene datoteke CSS in ustvarite predstavnostne poizvedbe v oznaka.

The tag je element HTML, ki se uporablja za uvoz sloga CSS iz zunanjega sloga. Ta oznaka ima medijsko lastnost, ki deluje enako kot predstavnostna poizvedba v CSS.

 glavni slog 

 tablični slog 
href = "tablet.css">
 tabela slogi pametnega telefona 

Zgornjo kodo je treba vstaviti v

oznako datoteke HTML. Zdaj vse, kar morate storiti, je, da ustvarite tri ločene datoteke CSS z imeni datotek main.css, tablet.css in smartphone.css - nato pa ustvarite poseben dizajn, ki ga želite za vsako napravo.

Slog v glavni datoteki bo veljal za vse zaslone s širino večjo od 800 slikovnih pik, veljal bo slog v datoteki tabličnega računalnika na vse zaslone s širino med 450px in 801px, slog v datoteki pametnega telefona pa bo veljal za vse spodnje zaslone 451 slikovnih pik.

Če ste prišli do konca tega članka, ste lahko izvedeli, kaj je odziven dizajn in zakaj je uporaben. Zdaj lahko prepoznate in uporabljate predstavnostna poizvedbe v datotekah CSS in HTML. Poleg tega ste se v CSS seznanili s prednostnim vrstnim redom in videli, kako lahko vpliva na delovanje predstavnostnih poizvedb.

Zasluga za sliko: Negativni prostor /Pekslov

Kako nastaviti sliko za ozadje v CSS

CSS je močno orodje za oblikovanje spletnih strani. Če se naučite postaviti sliko v ozadju, se naučite veliko osnov CSS.

Preberite Naprej

O avtorju