Prilagodljiva postavitev spletne strani: navodila po korakih s primeri

Postavitev je ustvarjanje strukture in oblikovanja elementov spletne strani. Pisanje kode za spletno stran je oblikovalec postavitve ali razvijalec vmesnika. Uporablja grafični program za rezanje postavitev, urejevalnik kod, dodatne programe za pospešitev procesa.

Kaj je postavitev

Koda postavitve je okostje strani spletnega mesta, napisano v označevalnem jeziku html. Sestavljen je iz logično razdeljenih na dele oznak strani. Vsak od njih je odgovoren za svoje območje: meni, klet, mediji, obrazci, zemljevidi, iskanje po lokaciji, čas. Imajo atribute, s pomočjo katerih se identificirajo posamezni elementi. Cascading style sheets so odgovorni za oblikovanje in javascript za dinamične učinke.

Kvalitativna postavitev je enako prikazana v vseh brskalnikih. Rezultat se določi z izvajanjem vrste testov. Sposobnost za delo na več kot eni strojni platformi se imenuje več platform. Obstaja več pristopov k izvedbi postavitve, ki uporabljajo različne okvire.

Za izdelavo strani po sodobnih standardih se uporabljajo različne metode prilagodljive postavitve. To zagotavlja pravilen prikaz elementov na vseh vrstah zaslonov.

Vrste postavitev

Standardi se nenehno izboljšujejo, zato se spreminjajo načini oblikovanja. Trenutno obstajajo 3 glavne vrste strani:

• statična;
• guma;
• prilagodljivo.

Statične postavitve so strani, ki ne morejo spremeniti zasnove. Njihova zasnova se ne spreminja in dimenzije elementov imajo jasen pomen.

Prilagodljiva postavitev pomeni, da se elementi spletnega mesta prilagajajo velikosti zaslona uporabljene naprave. Ko se spremeni širina dokumenta, se bloki ponovno zgradijo, nekateri deli zamenjajo drugi, nekateri elementi izginejo. Zamisel o prilagodljivosti je zamenjala mobilne različice spletnega mesta, ki živijo na ločenih poddomenah. Glavno načelo ustvarjanja prilagodljivosti je razvoj modela za tri zaslone: ​​računalnik, tablični računalnik, pametni telefon.

Pri izdelavi gumijaste postavitve se upošteva tudi spreminjanje velikosti zaslona in prilagodijo se vsi elementi. Glavna razlika od prilagodljivosti je v tem, da se postavitev v vsakem trenutku spremeni pod zaslonom.

Preverite, katera od uporabljenih načel je naslednja. Če se pri raztezanju okna brskalnika stran z njo raztegne, je to gumijasta postavitev. Ko se stran spletnega mesta spremeni le na nekaj mestih, pomeni, da je prilagodljiva.

Velikosti prilagodljive postavitve

Za ustvarjanje prilagodljivih postavitev se uporabijo relativne merske enote namesto standardnega statičnega px. Najpogostejši:

• em;
• rem;
• %

V prilagodljivi postavitvi na html, em se uporablja za nastavitev velikosti pisav in zamikov. Privzeto je 1 em 16 slikovnih pik. Zato morate za nastavitev pisave za odstavek p velikosti 32 slikovnih pik določiti naslednje:

p {

velikost pisave: 2em;

}

Posebnost uporabe enote je, da je 1em enak velikosti črk njegovega elementa. To pomeni, da 1em ima različne vrednosti v različnih delih kode. Na primer, v bloku, kjer je velikost pisave 2em (32 px), bo rob v 1em 32 slikovnih pik. Toda kjer je pisava 1em (16px), bo oblazinjenje v 1em enako standardnim 16 slikovnim pikam.

Rem - root em, ki je definiran v oznaki . 1 root-em, za razliko od 1em, je enako eni številki pod nobenim pogojem. Vrednost se spremeni le, ko so spremembe prisiljene.

Odstotki se navadno uporabljajo za nastavitev širine blokov ali slik. Ne glede na velikost zaslona bo ustrezala določeni vrednosti, na primer 80%.

Poizvedbe medijev

CSS vključuje podporo za različne tehnične parametre naprave. Pametni telefon z razširitvijo majhnega zaslona je določen, lastnost sloga je označena pod njeno vrednostjo. Poizvedbe medijev razkrivajo razlike v orientaciji: portret in pokrajina. Uporablja se za ustvarjanje prilagodljive postavitve. Postavitev za prilagoditev določenemu ločljivost zaslona struktura dokumenta se spreminja v skladu s kodo.

Določene vrste naprav:

• Braillove naprave in tiskalniki, vtisnjeni za slepe;
• tiskanje običajnih tiskalnikov;
• zaslon monitorja;
• govorski sintetizatorji;
• tv tv.

V vrednosti imena zahteve obstaja več pogojev. Na primer, prikažite vsebino samo za zaslone monitorjev in samo največ 600 px. Izgleda takole:

@media zaslon in (max-width: 600px) {izhodna koda}.

Prilagodljivo oblikovanje temelji na uporabi medijskih poizvedb. Ustvari postavitev za zaslone z najmanjšo širino 1200 slikovnih pik, telo kode je postavljeno v @media zaslon in (max-width: 1200px) {}. Nato se ustvari blok za @media zaslon in (min-width: 700px) tablet {} in @media zaslon in (max-width: 699px) {} mobilnih naprav.

Najprej mobilno

Glede na najnovejše kazalnike, od mobilnih naprav in tablet do interneta pridejo veliko pogosteje kot iz računalnikov. V skladu s tem postane mobilni promet bolj pomemben za spletne strani. Zaradi takšnih funkcij, kot so majhna velikost zaslona, ​​uporabniki pripomočkov dajejo prednost mestom iz prvih vrstic rezultatov iskanja, porabijo manj časa za iskanje informacij.

Pristop podjetja Mobile First vključuje prikazovanje najpomembnejše vsebine, enostavno in optimizirano spletno stran, ki zavrača prenos drugih virov.

Prilagodljiva postavitev mesta po tej metodologiji predvideva začetno izdelavo strani za majhne zaslone in naknadno dodajanje elementov, ki jih zahteva oblikovanje strani za velik monitor. Kljub preglednosti pristopa se kupci in izvajalci trudijo, da bi v celoti revidirali običajno metodo razvoja spletnega mesta.

Bootstrap

Eden od priljubljenih ogrodij, ki je dala preprost odgovor na vprašanje, kako narediti prilagodljivo postavitev, je Twitter Bootstrap. S pomočjo mreže zagonskega zagona z 12 stolpci se ustvarijo spletna mesta, ki jih privzeto na zaslonih mobilnih naprav takoj prikažejo. Glavna uporabljena orodja so:

• vnaprej določena širina stolpcev, ki lahko določi širino elementov;
• komponente fiksnih in gumijastih dokumentov;
• vgrajene pisave in razredi za njih;
• Sredstva za oblikovanje tabel;
• oblikovalske razrede v orodni vrstici menija.

Dinamični učinki so zapisani v jQuery, za opisovanje videza je uporabljen SASS procesor SASS, priljubljene spletne pisave pa so vgrajene v funkcionalnost. Spletne strani, razvite na najnovejši različici zagonskega zapisa, se ne prikazujejo pravilno v redko uporabljenih različicah brskalnikov, kot so IE8, IE9 in iOS 6. Pomembno je, da se root velikost uporablja kot velikost pisave za nekatere elemente. Uradna spletna stran vsebuje podrobne priročnike v angleščini in ruščini, primere prilagodljive postavitve, načine uporabe vgrajenih komponent.

Fundacija

Fundacija je močan okvir, eden glavnih tekmecev storitve Twitter Bootstrap. Podpira vse velikosti mrež, ima številne prednosti, ki jih v Bootstrapu manjka.

Komponente imajo velik nabor različnih animacijskih učinkov, ki jih lahko prilagodite. Za upravljanje slogov se uporablja predprocesor SASS. Seznam osnovnih predlog vsebuje drsnike, vrstice za krmarjenje, ikone Social Media.

Velikosti so določene z vrednostmi v tabeli.

Postavitev mreže

Drugi sistem, ki si zasluži pozornost, je postavitev mreže. To je niz vertikalnih in horizontalnih linij, ki se križajo. Oblikujejo stolpce in vrstice. Elementi so postavljeni v mrežo, njihove velikosti so navedene v skladu z vrsticami in tabelami. Možno je uporabiti fiksne velikosti, kot so px, in fleksibilne - odstotke, rem in em.

Najprej je treba deklarirati mrežni vsebnik.

prikaz: mreža

Lastnost grid-template-columns se uporablja za nastavitev širine vrstic in lastnost grid-template-rows se uporablja za stolpce. Dimenzije je mogoče podati v lastnostih grid-template-columns. Širina pasov se meri v enotah fr, ki predstavljajo del razpoložljivega prostora v posodi. Možno je uporabiti fx in px v eni lastnosti. Na primer, grid-template-column: 500px 1fr 2fr.

Zaključek

Popolna praksa prilagodljive postavitve od A do Z vključuje uporabo največjega števila metod. Za razstavljanje iz nič, kaj je postavitev za vse naprave, morate ročno uporabiti poizvedbe medijev, izračunati velikosti slik in pisav. Po pridobitvi ustreznih veščin lahko začnete uporabljati okvire.