Samantektin fyrir bæði margmiðlunarfyrirspurnir á milli mín og breiddar
Móttækileg vefhönnun er nálgun við að byggja upp vefsíðum þar sem þessar síður geta breytt skipulagi og útliti sínu á grundvelli skjástærðar gesta . Stórir skjáir geta fengið skipulag sem hentar þeim stærri skjám en minni tæki, eins og farsímar, geta fengið sömu vefsíðu sem er sniðin með þeim hætti sem hentar þeim minni skjá. Þessi aðferð veitir betri notendaupplifun fyrir alla notendur og það getur jafnvel hjálpað til við að bæta stöðu leitarvélarinnar . Mikilvægur hluti af móttækilegri vefhönnun er CSS Media Queries.
Fjölmiðlafyrirspurnir eru eins og litlar skilyrt yfirlýsingar í CSS skránni á vefsíðunni þinni, sem gerir þér kleift að setja ákveðnar CSS reglur sem munu aðeins hafa áhrif þegar ákveðin skilyrði eru uppfyllt - eins og þegar skjástærð er yfir eða undir ákveðnum mörkum.
Media Queries in Action
Svo hvernig notarðu fjölmiðlafyrirspurnir á vefsíðu? Hér er mjög einfalt dæmi:
- Þú myndir byrja með vel uppbyggt HTML skjal án nokkurs sjónræna stíl (það er það sem CSS er fyrir)
- Í CSS skránum þínum hefst þú eins og þú gerir venjulega með því að stilla síðuna og setja upphafsgildi fyrir hvernig vefsvæðið muni líta út. Segðu að þú vildir leturstærð síðunnar vera 16 punkta, þú gætir skrifað þetta CSS: líkami {font-size: 16px; }
- Nú gætirðu viljað auka þessi leturstærð fyrir stærri skjái sem hafa næga fasteignir til að gera það. Þetta er þar sem fjölmiðlafyrirspurnir sparka inn. Þú vilt hefja fjölmiðlunarfyrirspurn eins og þetta: @media skjár og (mín breidd: 1000px) {}
- Þetta er setningafræði fjölmiðlunarfyrirsagnar. Það byrjar með @media að koma á fjölmiðlum fyrir sig. Næst seturðu "fjölmiðla tegund", sem í þessu tilfelli er "skjár". Þetta á við um skjáborð skjáborðs, taflna, síma osfrv. Að lokum lýkurðu fjölmiðlunarfyrirspurninni með "fjölmiðlunarvirkni". Í dæminu hér fyrir ofan er það "miðjan breidd: 1000px". Þetta þýðir að fjölmiðlafyrirspurnin mun sparka inn fyrir sýna með lágmarksbreidd 1000 pixla á breidd.
- Eftir þessa þætti Media Query bætirðu við opnun og lokun krullu brace svipað og þú myndir gera í venjulegum CSS reglu.
- Lokaskrefið í fjölmiðlafyrirspurn er að bæta við CSS reglunum sem þú vilt sækja um þegar þetta skilyrði er uppfyllt. Þú bætir við þessum CSS reglum á milli hrokkið armbönd sem gera Media Query, eins og þetta: @media skjár og (mín breidd: 1000px) {líkami {font-size: 20px; }
- Þegar skilyrðin fyrir fjölmiðlunarfyrirspurnina eru uppfyllt (vafrinn glugginn er að minnsta kosti 1000 pixlar á breidd) mun þessi CSS-stíl taka gildi og breyta leturstærðinni á síðuna okkar frá 16 punktum sem við upphaflega settu til nýtt gildi okkar 20 punkta.
Bætir við fleiri stílum
Þú getur sett eins mörg CSS reglur innan þessa fjölmiðla fyrirspurn til að stilla sjónræna útliti vefsvæðis þíns. Til dæmis, ef þú vilt ekki aðeins auka leturstærðina í 20 punkta, heldur einnig breyta lit allra málsgreina í svörtu (# 000000) gætiðu bætt þessu við:
@media skjár og (mín breidd: 1000px) {líkami {leturstærð: 20px; } p {litur: # 000000; }}Bæti fleiri fjölmiðlafyrirspurnum
Að auki er hægt að bæta við fleiri fjölmiðlafyrirspurnum fyrir allar stærri stærðir og bæta þeim við stíllinn þinn þannig:
@media skjár og (mín breidd: 1000px) {líkami {leturstærð: 20px; } p {litur: # 000000; {} @ media skjár og (mín breidd: 1400px) {líkami {font-size: 24px; }}Fyrstu fjölmiðlafyrirspurnirnar myndu sparka inn á 1000 dílar á breidd og breyta leturstærðinni í 20 punkta. Þá, þegar vafrinn var yfir 1400 punktar, þá breyttust leturstærðin aftur í 24 punkta. Þú gætir bætt við fjölmörgum fjölmiðlafyrirspurnum eftir þörfum fyrir vefsíðuna þína.
Min-breidd og hámarksbreidd
Það eru almennt tvær leiðir til að skrifa fjölmiðlafyrirspurnir - með því að nota "lágmarksbreidd" eða með "hámarksbreidd". Hingað til höfum við séð "mín breidd" í aðgerð. Þetta veldur því að fjölmiðlafyrirspurnirnar öðlast gildi þegar vafrinn hefur náð að minnsta kosti lágmarksbreidd. Svo fyrirspurn sem notar "mín breidd: 1000px" gildir þegar vafrinn er að minnsta kosti 1000 pixlar á breidd. Þessi stíll Media Query er notuð þegar þú ert að byggja upp síðuna á "farsíma-fyrst" hátt.
Ef þú notar "hámarksbreidd" virkar það á móti. Fjölmiðlafyrirspurn um "hámarksbreidd: 1000px" myndi eiga við þegar vafrinn hefur fallið undir þessari stærð.
Varðandi eldri vafra
Ein áskorun við fjölmiðlafyrirspurnir er skortur á stuðningi í eldri útgáfum í Internet Explorer. Sem betur fer eru fáanlegar lausnir sem hægt er að plástur styðja við fjölmiðlafyrirspurnir í þeim eldri vöfrum sem leyfa þér að nota þær á vefsíðum í dag og tryggja ennþá að birting þess vefsvæðis sé ekki brotin í eldri vafraforritum.
Breytt af Jeremy Girard á 1/24/17