Fyrir nokkrum árum var það tiltölulega auðvelt að hanna og byggja upp vefsíður. Vefsíður voru einfaldari og voru skoðuð á skjáborðum og fartölvum með litlum breytingum á skjástærð. Í dag með farsímum sem taka á sig vafra sinn, er hægt að skoða vefsíðu á 4,8 "snjallsímaskjá, 5" spablet, 7 "spjaldtölvu eða hvaða stærð sem er á milli.
Svo hvernig tryggir þú að vefsvæðið þitt birtist rétt yfir tækjategundir og skjástærð?
Lausnin var fyrst lögð fram af Ethan Marcotte, þegar hann kannaði leiðir til að gera vefsíðuhugmyndir móttækilegir, þ.e. breyta þeim eftir skjástærðinni. Móttækilegur vefsíðahönnun er sá sem gerir snjalla notkun CSS til að tryggja að vefsíður skili vel yfir fjölmörgum skjástærðum - án þess að gripið verði til vefslóðarsendinga eða með því að þjóna mismunandi HTML og CSS kóða með mismunandi hætti, allt eftir UserAgent. Það er í raun ekki tækni eða staðall, heldur sett af meginreglum hönnunar sem hjálpa til við að ná árangri.
Undanfarin ár hafa margar móttækilegir sniðmát, CSS ramma og WordPress þemu komið upp. Það er til dæmis hægt að búa til móttækilegan vef í WordPress án þess að skrifa eina línu af kóða.
En alvöru vefhönnuður er ekki ánægður með að nota sniðmátin. Hún mun gera tilraun til að skilja þætti móttækilegrar vefhönnunar, til að geta notað þau á áhrifaríkan hátt.
Svo í dag ætlum við að líta á 3 grundvallaraðferðir sem þú þarft að læra, þú ert skilvirk móttækilegur hönnuður.
Með fjölmiðlafyrirspurnum er hægt að hanna mismunandi uppsetninga fyrir mismunandi fjölmiðlar eins og skjá, prenta, sjónvarp, handfesta tæki o.fl. Af miðöldum geturðu stillt stíl, letur og aðra þætti síðunnar.
Kynnt í CSS3, fjölmiðlafyrirspurnir leyfa hönnuður að sérsníða kynningu efnisins til þess að henta ákveðnum fjölda framleiðslutækja. Þau samanstanda af yfirlýsingu fjölmiðla og ein eða fleiri fjölmiðla eiginleikar tjáningar sem meta sannar eða rangar.
Fjölbreytileiðir fjölmiðla eru handfesta, skjár, tv, prentun og vörpun. Fjölmiðlar eru meðal annars en takmarkast ekki við hæð tækisins, breiddar, hlutfallshlutfalls, upplausn, litavísitölu og hæð, breidd vafra gluggans.
Við skulum taka grunn dæmi; Ímyndaðu þér að þú viljir að textastærðin minnki á minni tæki, eins og símar. Fyrirspurnin fyrir það myndi líta svona út:
p {font-size:1em;}@media all and (max-width:400px) {p {font-size:0.8em;}}Nú er leturstærð málsins stillt á 1em, nema breidd vafrans sé minna en 400px, en þá mun það minnka í 0.8em.
Að mínu mati er besti leiðin til að hanna móttækilegan skipulag að búa til sjálfgefið meistara stíll lak með helstu byggingareiningum. Þá er hægt að bæta við í fjölmiðlum fyrirspurnir til að sérsníða þætti byggt á útliti eða öðrum tækjatölum. Ef það er meira en handfylli reglna, gæti verið betra að flytja þá út í sérstakt barnalag - sem þú getur valið síðar í. Hér er hvernig það myndi virka:
Þetta stykki af kóða hefur eftirlit með því hvort tækið sé handfrjáls í landslagsmiðli með breidd tækisins minna en 720px, og ef svo er hleður það töflureikni töflunnar_layout.css .
Athugaðu að lögunin breidd, hæð, mín / hámarksbreidd, mín / hámarkshæð vísa allt til breiddar og hæð breiddar gluggans. Breidd og hæð breiddar tækisins er stjórnað af tækjabrotum, tækishæð, lágmarks- / hámarksfjölda tækisbreiddar, lágmarks / hámarksbúnaðarhæð . Ef þú vilt horfa upp fleiri dæmi með fjölmiðlafyrirspurnum MDN hefur góða umferð upp.
"Vökvakerfi" er hugtak sem notað er til að lýsa útliti sem er kóða í hlutfallslegum hlutföllum hinna ýmsu þætti, frekar en með föstum pixla gildi.
Hefðbundnar CSS skipanir notuðu fasta breiddarnet til að stilla þætti. The fastur-breidd nálgun virkar ekki lengur í dag núna þar sem við höfum tæki skjár allt frá 3 cm í nokkrar fætur. Í vökva rist hönnunar, allt er dulmáli með tilliti til hlutfallslegrar hlutfalls þess að grunnhlutanum þ.e. í stað þess að tilgreina hæð og breidd hvers frumefnis; það er gefið hlutfall eða hlutfallsleg stærð.
Ímyndaðu þér að þú hafir fjóra dálka. Til að gera þetta vökva, í stað þess að tilgreina hver sem 200 punkta breiður, þá verður þú að tilgreina þær 0,2083% (þ.e. sem 200/960). Að minnsta kosti er þetta meginreglan. Að búa til algjört vökvakerfi krefst mikillar aðgát. Það er eitt af þessum sjaldgæfum tilvikum sem ég vil frekar mæla með því að nota sérsniðnar verkfæri. Tiny Fluid Grid , Variable Grid System og Grunnlínu Grid eru nokkrar góðar kostir við að skrifa eigin vökvakerfi frá grunni.
Myndir eru talin sveigjanlegar þegar myndin birtist í móðurmáli, svo lengi sem HTML-ílátið styður það, en þegar vafra glugginn minnkar myndast myndin þannig að hún passi hana.
Jafnvel ef restin af hönnuninni er vökvi og móttækilegur, þá er það ekki að gerast vel, ef allir íhlutir eru ekki mælikvarðar. Þetta getur orðið erfitt með myndum og myndskeiðum. A 700 pixla breiður mynd mun líta vel út á skjáborði, en fá hakkað þegar skoðað á 320 pixla töflu. Flest nútíma móttækileg hönnun notar CSS hámarksbreidd eign til að gera myndir mælikvarða. (Þessi aðferð var fyrst lagt til af Richard Butler .)
img {max-width: 100%;}Þessar fáu línur munu tryggja að myndin sé ekki hakkað af með því að stilla hámarksmyndbreiddina í 100% af ílátinu. Ef gluggi eða skjáur verður minni mun þetta stykki af CSS kóða skreppa myndina í réttu hlutfalli við það. Hæðin er sjálfkrafa stillt á meðan hægt er að læsa hlutföllum.
Þú getur í staðinn læst myndinni til að hernema ákveðin lóðrétt skjárhlutfall eins og þetta
img {max-height: 75%;}(Gakktu úr skugga um að ekki sé hægt að nota bæði stærsta og breiddar eiginleika saman.)
Myndastærðin er einnig hægt að tengja við textastærðina í stað foreldraþáttarins með því að nota em , eins og þetta:
img {width: 30em;}Ef myndin inniheldur texta gætirðu viljað takmarka lágmarks / hámarks stærð til að tryggja að textinn sé læsilegur. Þú getur tilgreint það svona:
img {width: 30em;max-width: 500px;min-width: 100px;}Sama tækni er hægt að nota til að skala myndbönd, til dæmis:
.video embed, .video object, .video iframe { width: 100%; height: auto; }Móttækileg hönnun er framtíð iðnaðarins, en með svo mörgum mismunandi aðferðum sem fljúga um er erfitt að halda áfram. Master þessar 3 einfaldar aðferðir, og þú munt vera 90% af leiðinni til að vera móttækilegur hönnuður.