Móttækileg hönnun er alls staðar, og hvort sem þú notar ramma eða skrifað fjölmiðla fyrirspurnir sjálfur, eru nokkrir þættir á síðunni þinni bundnar til að færa eða mæla.
Ef fjölmiðlafyrirspurnir þínar eru byggðar á stærðum vafra og vafrinn er breytt, þá munu þættir þínar hoppa inn á sinn stað. Að bæta smá hreyfimynd við þessar eignir er góð snerta fyrir hvaða móttækilegu síðu.
Í dag ætla ég að sýna þér hversu auðvelt það er að bæta við aukalega snerta með því að hreyfa breidd og ógagnsæi þætti milli fjölmiðlafyrirspurnanna.
Fyrir þetta einfalda dæmi munum við nota div, sem inniheldur 3 smærri divs. Svæðin munu skala eftir stærð vafraglugganum. HTML er einfalt:
Nú, aðal CSS okkar mun setja þrjá reiti inni í aðal div og einnig, í takt við framlegð til hægri:
.layout {width:960px;height:600px;background:#b34d6f;margin:auto;}.box {width:300px;height:200px;margin-right:25px;background:#4d77b3;display:inline-block;margin-top:50px;}.box:last-child {margin-right:0px;}Þetta er aðal skipulag okkar, án fjölmiðlafyrirspurnir, þetta skipulag mun ekki laga sig ef sjónarhornið breytist. Nú þegar við höfum grunnatriði í stað, skulum við bæta við fjölmiðlum.
Fjölmiðlarannsóknir eru notaðar oft nú á dögum. Flestir vefur hönnuðir skilja þá, en ef þetta er í fyrsta sinn, þá er fljótleg endurnýjun: Fjölmiðlafyrirspurnir athuga getu tækisins sem þú notar (breidd, stefnumörkun og upplausn) og þau keyra ákveðna CSS ef skilyrðin sem tilgreind eru fyrir fjölmiðla fyrirspurn er uppfyllt. Í dæmi okkar munum við nota tvær fjölmiðlafyrirsagnir sem athuga hvort vafrinn sé minni en 960px og hvort það sé minni en 660px. Við munum þá setja breidd þætti í samræmi við það, við munum líka fela síðasta barnið div svo að hinir tveir hafi meira pláss:
@media screen and (max-width:960px) {.layout {width: 870px;}.box {width:270px;}}@media screen and (max-width: 660px) {.layout {width:570px;}.box {width:170px;}.box:last-child {opacity:0;}}Það er allt sem við þurfum fyrir fjölmiðlafyrirspurnir okkar. Athugaðu að það er mikilvægt að þessi kóði sé sett undir upphaflegu CSS kóða hér að ofan svo að fjölmiðlafyrirspurnir skrifa um kóðann fyrir ofan þau. Ef þú prófar skrána þína núna munt þú sjá að stærðin á deilunum breytist og ógagnsæi síðasta barns div breytist þegar þú breytir stærð vafra.
Þú munt taka eftir því að fela síðasta barnið div við erum að setja ógagnsæi sína í 0 í stað þess að láta það birtast: enginn. Það er vegna þess að við viljum geta búið til eignina; ógagnsæi hefur marga mismunandi gráður, en sýna er annað hvort satt eða ósatt (og því er ekki hægt að hreyfimynda).
CSS hreyfimyndir hafa reynst mjög vel þegar þeir framkvæma þessar litla hreyfimyndir sem við notuðum til að keyra í jQuery, svo sem hreyfimyndir, breidd og ógagnsæi.
Vegna þess að við viljum að síðunni sé að laga sig í heild, notum við * CSS valið og setur upp fjör okkar. CSS hreyfimyndir lækka tignarlega, en þú vilt bæta við seljanda forskeyti líka, þannig að það sé eins mikið stuðningur og mögulegt er:
*{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}Þú getur séð lokið niðurstöðu hér.
Að bæta við einföldum hreyfimyndir eins og þessum, eru góðar klárar snertingar við hvaða vefsíðu sem er. Nokkrar línur af kóða bætir mjög góðu pólsku við móttækilegan síðuna þína.
Ertu með hreyfimynda fyrirspurnir í verkefnum? Hvaða áhrif hefur þú náð? Láttu okkur vita í athugasemdunum.