Prieš praleisdami per ilgai, atsižvelgdami į tikslias monitoriaus raiškas savo dizainui, turėtumėte prisiminti, kad visas šiuolaikinis interneto dizainas yra jautrus, tai reiškia, kad jis sukurtas pritaikyti įvairiems projektams ekrano skiriamoji geba. Turėdami vieną dizainą, turite palaikyti viską, pradedant nuo mažiausių mobiliųjų ekranų, baigiant ultra HD darbalaukio monitoriais.
Su reaguojantis interneto dizainasnustatote bendresnius mobiliųjų įrenginių, planšetinių kompiuterių ir stalinių kompiuterių išdėstymus. Kada ir kaip kiekvienas puslapio elementas pasislenka į vietą šiems išdėstymams, lemia specialūs lūžio taškai, įrašyti į jūsų CSS. Šiuos lūžio taškus nustato tam tikros bendros ekrano skiriamosios gebos.
Nors netaikysite konkrečios skiriamosios gebos ar nenustatysite fiksuoto dydžio savo dizainams, atsižvelgsite į ekraną rezoliucijas nustatant pertraukos taškus ir sukuriant sklandų perėjimą, kad jūsų svetainė gerai atrodytų kiekviename įrenginyje ir ekrano dydis.
Bendros darbalaukio rezoliucijos
- 1280 x 720 standartinis HD - Šį galite geriau pažinti kaip 720p. Tai buvo standartinė HD raiška, kai HD pirmą kartą tapo įprasta. Tikriausiai nerasite daug naujų monitorių, naudojančių šią skiriamąją gebą, tačiau jų yra dar laukinėje gamtoje nuo tada, kai jie buvo populiaresni.
- 1366x768 - Tai kažkokia neįprasta raiška, tačiau labai populiari mažesniuose nešiojamuosiuose kompiuteriuose ir kai kuriose planšetėse. Jei turite reikalų su žemesnės klasės atstovais „Chromebook“ kompiuteriai, yra didelė tikimybė, kad tai yra rezoliucija, pagal kurią taikote.
- 1920x1080 Dažniausiai - Kai galvojate apie stalinius kompiuterius, tikriausiai turite reikalų su 1920x1080, geriau žinomu kaip 1080p. Ši rezoliucija yra absoliučiai visur. Dauguma darbalaukio monitorių vis dar yra 1080p, taip pat gausybė pilno dydžio nešiojamųjų kompiuterių. Taip pat kraštovaizdyje rasite deramą dalį 1080p planšetinių kompiuterių.
- 2560x1440 - 1440p yra dar vienas keistas vidurys monitoriaus raiškos paveikslėlyje. Tai didesnė nei tai, ką laikytumėte 2k, bet ne visai 4k. Tai reiškia, kad tai yra įprasta žaidimų monitorių raiška ir tai yra prieinama alternatyva norint naudotis visu 4k. Atsižvelgiant į jūsų svetainę, gali būti neverta palaikyti 1440p.
- 3840x2160 Artimiausia ateitis - Tai yra visas 4k arba „Ultra HD“. Nors dabar 4k paprastai skiriami aukščiausios klasės kompiuteriams, kainos krenta, grafikos technologijos tobulėja, o 4k paklausą skatina televizijos rinka, kur ji yra kur kas dažnesnė. Galima daryti prielaidą, kad per ateinančius kelerius metus 4k lengvai pralenks 1080p kaip de facto standartą, todėl dabar tikrai verta apskaityti 4k.
Bendrosios planšetinio kompiuterio / peizažo raiškos
Planšetiniai kompiuteriai gali būti ne tokie populiarūs kaip anksčiau, o didėjantys telefonų dydžiai, suporuoti su konvertuojamais nešiojamaisiais kompiuteriais, atrodo, gerokai sumažino jų rinkos dalį. Net vis tiek planšetinių kompiuterių skiriamosios gebos apskaita labai sutampa su staliniais ir nešiojamaisiais kompiuteriais. Galbūt galėsite naudoti planšetinių kompiuterių pertraukimo taškus, norėdami sukurti pertraukimo taškus tam tikriems varginantiems elementams, kurie netinka tiesiai esant tam tikrai rezoliucijai.
- Taip pat būtinai turėtumėte atsižvelgti į planšetinio kompiuterio skiriamąją gebą, kai prietaisai laikomi portreto režimu. Ne visi naršys planšetiniame kompiuteryje, kuris laikomas gulsčiai, todėl turėtumėte pridėti bent vieną bendro planšetinio kompiuterio, laikomo portretu, lūžio tašką.
- 1280x800 skiriamoji geba, kuri buvo įprasta - Senesnėse tabletėse, žemesnės klasės tabletėse ir mažesnėse tabletėse dažniausiai yra „Amazon Fire“ tablečių, kurios vis dar naudoja 1280x800. Tai yra viena iš paskutinių tikrai mobiliųjų skiriamųjų gebėjimų planšetiniuose kompiuteriuose.
- 1920x1200 dažnas 7 "ir 8" planšetiniuose kompiuteriuose - Kraštovaizdyje dažniausiai galite pasikliauti tais pačiais lūžio taškais kaip 1080p. Tačiau kai kraštovaizdyje pamatote vieną iš šių, situacija yra daug kitokia. Ši rezoliucija yra įprasta tarp daugybės 7 ir 8 colių planšetinių kompiuterių, įskaitant „Amazon Fire“.
- 2048x1536 „Apple“ tabletės -Tai yra labiausiai paplitusi „Apple“ planšetinių kompiuterių skiriamoji geba. Jis yra pakankamai panašus į 1440p, kad būtų labai mažai skirtumų, tačiau vėlgi, portretas yra neįprastas. Bet kokiu atveju patartina išbandyti savo svetainę šia rezoliucija, kad „iPad“ nenutiktų nieko keisto.
Didesnės skiriamosios gebos planšetiniai kompiuteriai pradeda patekti į darbalaukio teritoriją. Dažniausiai net nereikia jų atsiskaityti, nes skiriamoji geba patenka į diapazoną, už kurį jau atsižvelgėte. Vis dėlto verta išbandyti, kad būtumėte visiškai tikri.
Bendros mobiliųjų rezoliucijos
Mobiliųjų įrenginių valdymas yra lengvai sudėtingiausias. Yra toks įvairus prietaisų asortimentas, įskaitant vis dar naudojamus senesnius įrenginius. Nėra lengva juos visus aprėpti. Štai kodėl dizainas mobiliesiems yra toks populiarus. Filosofija paprasta. Pirmiausia pradėkite nuo paprasčiausio mobiliojo dizaino ir kurkite jį didesniems ir didesniems ekranams. Tokiu būdu veikia net seniausi ir mažiausi įrenginiai, tačiau turintys mažiau turinio ir mažiau funkcijų. Svetainė nėra užstrigusi, joje pirmiausia pateikiama tik svarbiausia ir dažniausiai pasiekiama informacija.
Štai įdomus triukas, kaip elgtis su telefonais; pasukite darbalaukio rezoliucijas į savo pusę. Aišku, yra neįprastų išskirtinumų, tačiau dauguma dabartinių telefonų laikosi šio modelio.
- 720x1280 įprasta senesniuose įrenginiuose - daugelį metų 720p, pasuktas ant šono, buvo labiausiai paplitęs mobiliojo prietaiso standartas. Tokiu atveju jums nereikia jaudintis dėl kraštovaizdžio režimo, nes jis yra toks pats kaip darbalaukio 720p. Tiesiog padenkite portreto skiriamąją gebą 720 taškų pločiu.
- 1080x1920 vidurio kelias - 1080p buvo standartas labai ilgą laiką. Tai vis dar labai įprasta vidutinės klasės įrenginiuose. Jei ketinate palaikyti tik vieną skiriamąją gebą mobiliesiems, tai yra viskas.
- 1440x2560 dabartinis aukščiausios klasės - Mobilieji įrenginiai vis didėja, o ekranai - vis didesnės skiriamosios gebos. 1440p yra įdomus standartas, nes yra įvairių ekrano pločių - šiuo atveju ilgių -, kurie patenka į tą diapazoną. Abiejuose staliniuose ir mobiliuosiuose įrenginiuose dažniausiai naudojama 1440x2560. Tai suteikia ekrane bendrą 16: 9 formato koeficientą. Mobiliajame telefone tai svarbu šiek tiek mažiau nei staliniams kompiuteriams, nes įrenginio ilgis neturi didelės įtakos jūsų dizainui.
Prieš laimingai palaikydami tik tris skiriamąsias gebas mobiliesiems, turėtumėte suprasti, kad kai kurie žmonės naudoja juokingai senus telefonus su mažais ekranais. Visada turėtumėte sukurti minimalią skiriamąją gebą, kad užtikrintumėte, jog jūsų svetainė atrodys gerai net ir kelerius metus besinaudojančiam telefonu.
Paprasti patarimai, kuriuos reikia nepamiršti
Lengva paimti daugybę faktų apie ekrano skiriamąją gebą, nutekėjimą ir pradėti tyčiotis iš dizaino, ir tai yra būtent tada, kai jums kyla problemų. Kurdami svetainę, turėtumėte atsiminti keletą pagrindinių idėjų, ir jos tinka daugumoje, jei ne visose, situacijose.
- Reaguojantis dizainas yra sklandus - Galite pajusti polinkį į savo CSS sukurti didžiulį taškų rinkinį, kad būtų atsižvelgta į kiekvieną įmanomą ekrano dydį ir situaciją. Tai puikus būdas išprotėti. Interaktyvus interneto dizainas turėtų būti pakankamai lankstus, kad užpildytų spragas ir pažeidimus. Jei pastebite, kad nustatote per daug statinių skaičių, nesvarbu, ar jie yra žiniasklaidos užklausose, ar dėl pačių elementų, tikriausiai einate neteisingu keliu.
- Žmonės ne visada padidina savo naršyklę - Tai eina kartu su ankstesniu punktu. Tu gali dizainas ekrano dydžiams, bet kai kas nors neišnaudoja savo naršyklės lango, viskas, kas kyla dūmuose. Laikydami daiktus savo dizaino skystyje, galite išvengti problemų dėl įvairaus naršyklės lango dydžio.
- Išbandyti viską - Pabandykite sugadinti savo svetainę. Tik taip rasite visas klaidas ir neatitikimus, kurie sugadins lankytojo patirtį. „Chrome“ turi įmontuotus įrankius, skirtus išbandyti įrenginių skiriamąją gebą, pateikiant visą populiariausių įrenginių, su kuriais norite dirbti, sąrašą. Jūs visada turite galimybę patys nuvilkti naršyklės langą į skirtingus dydžius, kad pamatytumėte, kaip svetainė atrodo įvairiais dydžiais, ir kaip ji prisitaiko ir sugenda.
- Nesitikėkite, kad jūsų vartotojai turės naujausius ir geriausius - Tai grįžta į ankstesnį punktą apie senesnius telefonus ir mažą skiriamąją gebą. Negalite tikėtis, kad žmonės turės naujus įrenginius. Tai taikoma ir ekrano raiškai, ir apdorojimo galiai. Įkeliama svetainė su per daug grafikos ir per daug „JavaScript“ yra geras būdas priversti žmones, turinčius lėtą prietaisą, išeiti ir niekada nebegrįžti.