A reaguojantis išdėstymas tapo žiniatinklio dizaino norma, tokio tipo puslapių išdėstymas reiškia, kad jei lango, kuriame yra jis, staiga pasikeičia dydis, ty nuo labai didelio iki labai mažo ir atvirkščiai, mūsų elementai turi turėti galimybę pertvarkyti, kad išlaikytų tinkama ir funkcionali vartotojo patirtis.
Tai visada buvo prieinama pagal taisykles CSSTačiau paskutinį kartą įgyvendinus tą patį buvo imtasi geresnių priemonių, iš dalies dėl to, kad jau egzistuoja modernus mobilusis pasaulis, kuris yra vienas iš didžiausių dizaino vartotojų reaguoja.
Nors yra keletas sistemų, tokių kaip Bootstrap arba Fondas kurie pagal numatytuosius nustatymus suteikia mums reaguojantį išdėstymą, mes ne visada galime nuo jų priklausyti, todėl labai naudinga žinoti, kaip mes galime sukurti šių charakteristikų išdėstymą savo priemonėmis.
Reikalavimai
1- Norėdami užbaigti šią pamoką, turėsime turėti pagrindinių žinių HTML Y CSS, nes jie yra gyvybiškai svarbūs, norint suprasti vadovėlyje pateiktus pavyzdžius.
2- Kalbant apie techninę pusę, mums reikia bent jau tokios modernios naršyklės kaip „Google Chrome“, teksto redaktorius, kad galėtume parašyti mūsų kodą, galime naudoti Aukščiausias tekstas o „NotePad ++“ ar net „Windows“ bloknotas arba Geditas „Linux“, jei jaučiame nuotykius.
3- Galiausiai mums reikia interneto ryšio, kad atsisiųstume vieną ar du vaizdus, jei norime jį įtraukti į savo kodą, kaip matysime viename iš pateiktų pavyzdžių.
Savybės minwidth ir maxwidth
Tai galbūt pirmasis aspektas, su kuriuo susiduriame dirbdami su aplinka reaguoja, nes daug kartų mes sutelkiame dėmesį į tai, kai puslapis tampa mažesnis, bet ką apie naujus ekranus 4K? Štai kodėl neturime pamiršti didžiausios skiriamosios gebos, pagal kurią mūsų svetainė atrodo tinkama.
minwidth ir maxwidthSavybės ar atributai plotis Y maksimalus plotis CSS padeda mums kovoti su šia problema, nes jie leidžia mums nustatyti maksimalias ribas, kuriomis mes norime, kad mūsų dizainas būtų reaguoja, nes jei ne, kraštutinumai dėl dydžių gali mus apgauti, ypač šiais momentais, kai rezoliucijos ir toliau didėja, bet dar netampa didžiulėmis.
Šiame pavyzdyje mes parodysime, kaip galime reguliuoti savo išdėstymas dėka minėtų savybių, mes ketiname sukurti dokumentą HTML turinį:
Interaktyvaus išdėstymo pavyzdys 1Tai, ką mes padarėme, sukūrėme tris div elementus, kurie veikia kaip tam tikri stulpeliai, todėl šiuo atveju sakome jo konteinerio elementui straipsnis kad jo didžiausias plotis bus 1200 pikseliųTaigi, nesvarbu, koks didelis ekranas, dizainas niekada daugiau neišaugs, tada mes sukuriame tris klases, po vieną kiekvienai daliai ir vieną, tokiu būdu priskiriame minimalų plotį, nesvarbu, kiek ekranas sumažintas, visada išlieka. norint išlaikyti minimalias proporcijas, tai puikiai tinka vaizdams, kaip matysime pavyzdžio ekrano kopijoje, ir galiausiai klasei plūdė mes taip pat priskiriame jam minimalų plotį. Pažiūrėkime, kaip mūsų pavyzdys atrodo naršyklėje, kai turime didelę skiriamąją gebą:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris ir sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Phasellus varius ipsum non ligula aliquet ultricies in quis pain. Aliquam ac nisl transporto priemonės.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris ir sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Phasellus varius ipsum non ligula aliquet ultricies for quis pain. Aliquam ac nisl transporto priemonės.
DIDELIS
Dabar pažiūrėkime, kaip jis keičiasi, kai šiek tiek sumažiname naršyklės langą:
DIDELIS
Galiausiai, pažiūrėkime rezultatą, kai padarysime langą panašaus dydžio kaip mobilusis:
Matėme, kaip išlaikomos minimalios ir maksimalios proporcijos, tačiau svarbiausia, kad mūsų dizainas buvo pritaikytas prie skirtingų rezoliucijų, kuriomis jį vizualizavome, ir tokiu būdu galėjome užtikrinti, kad vartotojas neprarastų tinkamumą naudoti mūsų svetainėje.
Žinoma, tai toli gražu nėra kažkas, ką reikia parodyti gamyboje, tačiau tai suteikia mums supratimą, kur turėtume sutelkti pastangas, kai dirbame su tikrais mūsų programų ir puslapių dizainais, įdomu tai, kad stulpeliai buvo sureguliuoti taip, kad galėtume pamatyti, kaip perėjome nuo trijų stulpelių išdėstymo prie vieno stulpelio išdėstymo.
Naudojant Santykinis užpildas
The paminkštinimas Tai priemonė, leidžianti išlaikyti turinio erdvę prieš konteinerio kraštus, kad būtų nustatyta riba, kiek toli jis nueis, ir neturėtų būti painiojama su paraštėmis, nes tai yra kita sąvoka.
Esmė ta, kad paminkštinimas į tai beveik niekada neatsižvelgiama darant a išdėstymas būti reaguoja todėl tekstai ir turinys vėliau lieka neestetiški, kai keičiama skiriamoji geba, kuria žiūrimas dizainas.
Toliau pateiktame kode mes padarysime vietą a paminkštinimas kuris veikia santykinai, tai yra, reguliuojant lango dydį, mūsų paminkštinimas Jis pasikeis, kad išlaikytų proporcijas ir tokiu būdu turinys visada išliktų toks, kokį mes jį išdėstėme, nepaisant to, kad dėl rezoliucijos pasikeitimo jis turi mažiau vietos. Pažvelkime į mūsų kodo pavyzdį:
Santykinis užpildasIšlaikykite proporcijas santykiniu pamušaluKaip matome, mes apibrėžiame savybes paminkštinimas kiekvienoje klasėje su procentinėmis reikšmėmis, o ne su fiksuotomis vertėmis su matavimais taškais, tokiu būdu naršyklės stiliaus vertėjas, matydamas savo pavyzdį, pateikia matavimą, kuris atitinka mūsų pateiktą vertę naršyklėje gauname:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris ir sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris ir sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris ir sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.
DIDELIS
Dabar, jei sumažinsime lango dydį, pamatysime, kaip atliekamas koregavimas, tačiau išlaikant proporcingą atstumą nuo teksto iki kraštų:
Tada mes pastebime, kaip išlaikomas mūsų dizainas ir išvengiama deformacijos, nes sumažiname jo turinčio asmens skiriamąją gebą ir taip išlaikome nuoseklią naudotojo patirtį.
Nors yra ir daugiau pažangių koncepcijų, kurias aptarsime kitose mokymo priemonėse, tačiau pasinaudoję šia pora gudrybių ar patarimų galime sugrąžinti senoms svetainėms naują gyvenimą ir dar daugiau nei paieškos sistemos, pvz. „Google“ Jie prašo mūsų mobiliosios versijos, kad galėtume teikti pirmenybę rezultatams. Svarbiausias dalykas norint pasiekti puikių rezultatų yra eksperimentuoti ir toliau daug praktikuoti, kad šie sprendimai natūraliai išeitų iš mūsų proto ir nereikėtų visą laiką kreiptis į vadovus.
Tuo mes baigiame šią pamoką, nes matome, kad mums nereikia jokios sistemos rezultatams pasiekti reaguoja, ir mums taip pat nereikia palikti derinio HTML + CSSVienintelis dalykas yra tai, kad jei mes turime kurti savo įrankius, vis dėlto pasitenkinimas tobulinant mūsų dizainą yra didelis atlygis.
