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

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

Če želite razvijati spletna mesta/spletne aplikacije, je znanje o ustvarjanju odzivnih modelov bistveno za vaš uspeh.





V preteklosti je bilo ustvarjanje spletnih mest, ki so se dobro prilagajala različnim velikostim zaslona, ​​luksuz, ki so ga morali lastniki spletnih mest zahtevati od razvijalca. Zaradi porasta uporabe pametnih telefonov in tabličnih računalnikov je odzivno oblikovanje postalo nujno v svetu razvoja programske opreme.



Uporaba medijskih poizvedb je najboljši način, da zagotovite, da bo vaše spletno mesto/spletna aplikacija na vsaki napravi videti tako, kot želite.





Razumevanje odzivnega oblikovanja

Na kratko, odzivno oblikovanje obravnava uporabo HTML/CSS za ustvarjanje postavitve spletnega mesta/spletne aplikacije, ki se prilagaja 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 vsake spletne strani
  • Uporaba medijskih poizvedb

Kaj so medijska vprašanja?

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



Preberite več: Essential CSS3 Properties Cheat Sheet

Medijske poizvedbe ponujajo okvir za enkratno ustvarjanje kode in njeno večkratno uporabo v celotnem programu. To se morda ne zdi tako koristno, če razvijate spletno mesto s samo tremi spletnimi stranmi, če pa delate za podjetje s stotinami različnih spletnih strani - se bo to izkazalo za ogromno prihranek časa.



Uporaba medijskih poizvedb

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

Struktura medijskih poizvedb

Primer strukture medijskih poizvedb


@media only/not media-type and (expression){
/*CSS code*/
}

Splošna struktura medijske poizvedbe vključuje:



  • Ključna beseda @media
  • Ključna beseda not/only
  • Medij (ki je lahko zaslon, tiskanje ali govor)
  • Ključna beseda in
  • Edinstven izraz v oklepaju
  • Koda CSS, zaprta v par odprtih in zaprtih zavihkov.

Povezano: Uporaba CSS za oblikovanje dokumentov za tiskanje

Primer medijske poizvedbe z edino ključno besedo


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

Zgornji primer uporablja slog CSS (zlasti modro barvo ozadja) samo za zaslone naprav, ki imajo širino 450 slikovnih pik in manj - torej v bistvu pametne telefone. Edino ključno besedo je mogoče zamenjati s ključno besedo not, nato pa bi slog CSS v zgornji medijski poizvedbi veljal le za tiskanje in govor.

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

Primer privzete medijske poizvedbe


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

Postavitev medijskih poizvedb

Medijska poizvedba je lastnost CSS; zato se lahko uporablja le v jeziku za oblikovanje. CSS lahko v kodo vključite na tri različne načine; vendar le dve od teh metod ponujata praktičen način za vključitev medijskih poizvedb v vaše programe - notranji ali zunanji CSS.

Interna metoda vključuje dodajanje oznake oznaki datoteke HTML in ustvarjanje medijske poizvedbe znotraj parametrov oznake.

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

Obseg medijskih poizvedb

Ne glede na to, ali se medijske poizvedbe uporabljajo prek notranjega ali zunanjega CSS, obstaja en pomemben vidik stilskega jezika, ki lahko negativno vpliva na delovanje medijske poizvedbe. CSS ima pravilo vrstnega reda. Ko uporabljate izbirnik CSS ali v tem primeru medijsko poizvedbo, vsaka nova medijska poizvedba, dodana datoteki CSS, preglasi (ali ima prednost pred) tisto, ki je bila prej.

Privzeta koda za medijske poizvedbe, 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, bi morda pomislili, da lahko preprosto dodate naslednjo kodo v že obstoječo datoteko CSS.

Primer medijske poizvedbe za tablični računalnik


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

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

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

Vendar pa obstaja boljši način za dosego ločenega oblikovanja za pametne telefone in tablične računalnike, ne da bi vas skrbel vrstni red. To je funkcija medijskih poizvedb, znanih kot specifikacija obsega, kjer lahko razvijalec ustvari medijsko poizvedbo z največjo in najmanjšo širino (obseg).

Primer medijske poizvedbe za tablični računalnik


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

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

Če ne želite vdelati medijskih poizvedb v kodo CSS, lahko uporabite drugo metodo. Ta metoda vključuje uporabo medijskih poizvedb v oznaki datoteke HTML, zato lahko namesto ene velike slogovne liste, ki vsebuje nastavitve oblikovanja za pametne telefone, tablične računalnike in računalnike, uporabite tri ločene datoteke CSS in ustvarite svoje medijske poizvedbe v oznaki.

Oznaka je element HTML, ki se uporablja za uvoz stilov CSS iz zunanje slogovne liste. Ta oznaka ima medijsko lastnost, ki deluje enako kot medijska poizvedba v CSS.




href='tablet.css'>


Zgornjo kodo morate vstaviti v oznako datoteke HTML. Zdaj morate samo ustvariti tri ločene datoteke CSS z imeni datotek main.css, tablet.css in smartphone.css - nato ustvariti posebno zasnovo, ki bi jo želeli za vsako napravo.

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

kako spremeniti dpi v Photoshopu

Zdaj imate orodja za ustvarjanje odzivnih modelov

Če ste prišli do konca tega članka, ste lahko izvedeli, kaj je odzivno oblikovanje in zakaj je koristno. Zdaj lahko prepoznate in uporabite predstavniške poizvedbe v datotekah CSS in HTML. Poleg tega ste bili seznanjeni z vrstnim redom prednosti v CSS in videli, kako lahko vpliva na delovanje vaših medijskih poizvedb.

Zasluge za sliko: Negative Space/ Peksli

Deliti Deliti Cvrkutati E-naslov Kako nastaviti sliko ozadja v CSS

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

Preberite Naprej Sorodne teme
  • Programiranje
  • Spletni razvoj
  • Oblikovanje spletnih strani
  • CSS
O avtorju Kadeisha Kean(21 objavljenih člankov)

Kadeisha Kean je razvijalka programske opreme in tehnična/tehnološka pisateljica. Ima izrazito sposobnost poenostavitve nekaterih najbolj zapletenih tehnoloških konceptov; izdelavo materiala, ki ga lahko vsak tehnološki začetnik zlahka razume. Strastno piše, razvija zanimivo programsko opremo in potuje po svetu (skozi dokumentarne filme).

Več od Kadeisha Kean

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite