Pratarmė

Šiuo metu mobiliojo ryšio srauto dalis sparčiai auga. Kasdien vis daugiau žmonių naudojasi įrenginiais su interneto prieiga. Telefonas visada po ranka, bet kurioje vietoje žmonės gali ieškoti reikiamos informacijos, skaityti naujienas ir pan. Įprastą svetainę galima peržiūrėti mobiliuoju įrenginiu. Tačiau žiūrint yra keletas niuansų – norint perskaityti atskirus teksto blokus palyginti mažame ekrane, reikia pakeisti puslapio mastelį. Dėl to prarandamas skaitomumas ir patogumas, svetainę reikia nuolat slinkti, ištempti, priartinti. Daugelis svetainių valdiklių yra nepatogūs naudoti, nes puslapiai nėra sukurti taip, kad juos būtų galima valdyti palietus ekraną. Norėdami išspręsti šias problemas, jie pradėjo kurti svetaines, kurios gali patogiai rodyti informaciją bet kuriame įrenginyje.

Apie straipsnį

Šis straipsnis skirtas kūrėjams, turintiems patirties svetainių maketavimo srityje, kurie išmano HTML Ir css kurie supranta CSS selektorių paskirtį ir kt.

Šiame straipsnyje bus aptariami išdėstymo tipai, leidžiantys teisingai rodyti svetaines bet kokia skiriamąja geba, ir būdai, kuriais tai daroma. Išanalizuokime sąvoką css- sudaryti pagrindą ir atlikti lyginamąją populiariausių analizę.

Išdėstymo tipai

Apsvarstykite pagrindinius maketų tipus, jų skirtumus ir pagrindinius jų įgyvendinimo principus.

Fiksuotas išdėstymas

Fiksuotas išdėstymas (Fixed Layout) – būdas sukurti tam tikro pločio svetainės puslapius. Komponentų plotis puslapyje nesikeičia. Mažos skyros monitoriuose atsiranda horizontali slinkties juosta. Šio tipo išdėstymas netinka patogiam informacijos atvaizdavimui mobiliuosiuose įrenginiuose.
Toliau pateiktame pavyzdyje parodyta, kaip nustatyti griežtą žymos plotį. kūnas:

Guminis išdėstymas

Guminis išdėstymas (elastinis išdėstymas) reiškia svetainės komponentų galimybę keisti savo dydį, priklausomai nuo naršyklės lango dydžio, ištempti nuo ir iki nurodyto minimalaus ir didžiausio dydžio. Tai pasiekiama naudojant santykines vertes, maksimalus plotis / min(maks./min. plotis), maksimalus aukštis / min aukštis(maks./min aukštis).
Guminio išdėstymo metodų naudojimo pavyzdžiai:

Adaptyvus išdėstymas

Adaptyvus išdėstymas ( Adaptyvusis išdėstymas ) leidžia pritaikyti pagrindinį konteinerį ir bet kurį kitą svetainės elementą prie ekrano raiškos, todėl galima keisti šrifto dydį, objektų vietą, spalvą ir pan. Tai vyksta dinamiškai, pavyzdžiui, naudojant medijos užklausas ( @media), kurios leidžia automatiškai nustatyti monitoriaus skiriamąją gebą, įrenginio tipą ir pakeisti nurodytas reikšmes automatiniu režimu. Toliau pateiktame pavyzdyje nustatomas plotis div lygus 960 taškų 1200 taškų Ir 320 taškų visiems įrenginiams, kurių plotis mažesnis 480 pikselių.

Reaktyvus išdėstymas

Responsive Layout yra sklandaus ir reaguojančio išdėstymo derinys. Šis metodas naudoja ir medijos užklausas, ir komponentų pločio procentus. Naudodamiesi tokio tipo išdėstymu, galime drąsiai teigti, kad svetainė prisitaikys prie bet kurio įrenginio.
Žemiau yra plotis div lygus 50 % pirminio komponento dydžio visiems įrenginiams, kurių plotis mažesnis nei 1200 pikselių, ir 100 % visų įrenginių, kurių plotis mažesnis nei 480 pikselių.

Pagrindiniai bet kokios rezoliucijos svetainių diegimo būdai

Santykinės vertybės

Naudojant santykines reikšmes, informacija ir komponentai gali būti rodomi puslapyje nepažeidžiant skaitomumo ir žiūrėjimo patogumo.

Santykinės dydžių ir užpildų vertės

Galima nustatyti santykines vertes plotis, aukštis, paraštė, paminkštinimas ir tt Labiausiai žinomas būdas nurodyti santykinį dydį yra procentais (%).
Toliau pateikiamas pločio nustatymo į 90 % pagrindinio komponento dydžio pavyzdys.

Šiuo atveju vertė apskaičiuojama pagal pirminį komponentą.
Taip pat yra verčių, susijusių su ekrano dydžiu:

• vw- 1% lango pločio. Sumažėjus lango plotiui, mažėja elemento plotis, aukštis, šriftas;
• vh- 1% lango aukščio. Sumažėjus lango aukščiui, mažėja elemento plotis, aukštis, šriftas;
• vmin – mažiausias iš vw Ir vh;
• vmax – didžiausias iš vw Ir vh.

Žemiau pateikiamas naudojimo pavyzdys vw Ir vh. Šiuo atveju žymos plotis ir aukštis div bus lygus atitinkamai 50% ekrano pločio ir aukščio.

Santykinės šrifto dydžio reikšmės

Yra šios santykinės šriftų reikšmės:

• em- nustato dydį, palyginti su pagrindinio šriftu;
• rem- nustato dydį, palyginti su šriftu .

Apsvarstykite pavyzdį:

Apskaičiuokite žymos šrifto dydį kūnas. Šiame pavyzdyje šrifto dydis kūnas nustatyti pagal dydį html. Taigi šrifto dydis kūnas bus lygus 30 px (20px * 1.5 = 30px).

Taip pat galite nustatyti santykinius šrifto dydžius naudodami %, vw, vh ir tt Šiame pavyzdyje šrifto dydis kūnas yra lygus 80 % šrifto dydžio html - 16px.

Didžiausi ir mažiausi komponentų dydžiai

Norėdami nustatyti didžiausias ir mažiausias komponento pločio ir aukščio vertes, naudokite savybes maksimalus plotis / min Ir maksimalus aukštis / min aukštis atitinkamai.

Apsvarstykite pavyzdį:

Tarkime, kad pirminis komponentas div yra kūnas. Tada, keičiant ekrano plotį, šio komponento plotis bus 60% pločio kūnas. Tačiau jis padidės tik iki nurodytos vertės maksimalus plotis, tai yra 500 px. Kai konteineris pasieks tokį plotį, jis nustos augti.

Naudojant medijos užklausas

Medijos užklausos leidžia nustatyti konkretaus ekrano dydžio stilius, įrenginio tipą pagal įrenginio charakteristikas ir kt. Visos medijos užklausos prasideda @media, po kurio nurodoma sąlyga.

Galite naudoti medijos užklausas, kad sukurtumėte šių tipų įrenginių stilių:

• visi- visi tipai (vertė naudojama pagal numatytuosius nustatymus)
• Brailio raštas- Brailio rašto sistemos pagrindu sukurti įrenginiai, skirti skaityti akliesiems
• įspaustas- Brailio rašto spausdintuvai
• rankinis- išmanieji telefonai ir panašūs įrenginiai
• spausdinti- spausdintuvai ir kiti spausdinimo įrenginiai
• projekcija- projektoriai
• ekranas- monitoriaus ekranas
• kalba- kalbos sintezatoriai, taip pat programos tekstui groti garsiai
• tty- įrenginiai su fiksuotu simbolių dydžiu
• tv- televizoriai.

Div žymės pločio nustatymo pavyzdys monitorių ekranuose, išmaniuosiuose telefonuose ir kt.

Nuorodos į adaptyvaus išdėstymo įgyvendinimo būdus

Šiame straipsnyje ir kitus išsamiau aptartus metodus galite peržiūrėti ir ištirti nuorodose:

• Ar turėčiau sukurti mobiliąją versiją? 5 dažniausiai pasitaikančios problemos, kurias išsprendžia prisitaikantis išdėstymas. Yandex patirtis

CSS sistemos

css-framework – karkasas, sukurtas siekiant supaprastinti maketuotojo darbą, paspartinti kūrimą ir pašalinti kuo daugiau maketavimo klaidų (skirtingų naršyklės versijų suderinamumo problemos ir pan.). Šios sistemos reiškia įvairių būdų, kaip teisingai rodyti svetaines bet kokio dydžio įrenginiuose, naudojimą.
Daugelis kūrėjų nori naudoti css-frameworks, užuot nurodę visus stilius rankiniu būdu. Taip yra dėl šių priežasčių:

• Greitesnis vystymasis
• Kelių naršyklių palaikymas
• Įvairių įrenginių ir ekrano dydžių palaikymas
• Kodo vienodumas dirbant komandoje leidžia sumažinti nesutarimų skaičių kūrimo metu.

Kaip ir scenarijų programavimo kalbų bibliotekos, css- bibliotekos, dažniausiai išorinės css-failas pridedamas prie tinklalapio antraštės.

Apsvarstykite populiariausius css- karkasai.

Bootstrap

Populiariausia sistema kuriant reaguojančią ir mobiliąją žiniatinklio- projektai. Bootstrap yra atvirojo kodo svetainių kūrimo įrankis. HTML, CSS ir JS. Bootstrap- intuityviai paprasta ir tuo pat metu galinga priekinė sistema, kuri padidina greitį ir palengvina plėtrą žiniatinklio-programos.

Bootstrap Lengvai ir efektyviai padidinkite savo projektą naudodami vieną kodo bazę – nuo ​​telefonų ir planšetinių kompiuterių iki stalinių kompiuterių. Tam naudojama 12 stulpelių tinklelis:

Be to cssši sistema apima dviejų populiariausių palaikymą css- pirminiai procesoriai: Mažiau Ir Sass.

Skiriamieji bruožai:

• 12 - stulpelių tinklelis
• Didelis paruoštų naudoti komponentų skaičius
• Palaikymas Mažiau Ir Sass
• Naudojimas normalizuoti.css

„Bootstrap“ medžiagos dizainas

„Bootstrap“ medžiagos dizainas yra atvirojo kodo programų kūrimo įrankių rinkinys, pagrįstas Bootstrap ir naudojant metodus medžiagos dizainas.
Sistema leidžia greitai sukurti programą naudojant kintamuosius siaubas, adaptyvus tinklelis, daugybė paruoštų komponentų ir įdiegtų galingų įskiepių jQuery.

Skiriamieji bruožai:

• 12 - stulpelių tinklelis
• Daug paruoštų naudoti komponentų pagal koncepciją medžiagos dizainas.

Svetainės išdėstymas yra svetainės struktūros, kuri yra pagrindinis skeletas, kūrimo procesas. Ant jo dedami dizaino stiliai ir dinamiški efektai. Už s...

„Masterweb“.

20.04.2018 01:00

Maketas – tai tinklalapio elementų struktūros ir dizaino sukūrimas. Už tinklalapio kodo rašymą atsakingas programuotojas arba sąsajos kūrėjas. Procesui paspartinti naudojama grafikos pjovimo programa, kodų rengyklė, papildomos programos.

Kas yra išdėstymas

Išdėstymo kodas yra svetainės puslapio skeletas, parašytas html žymėjimo kalba. Jį sudaro logiškai suskirstytos į elementus puslapio dalys – žymės. Kiekvienas iš jų yra atsakingas už savo sritį: meniu, svetainės poraštę, laikmeną, formas, žemėlapius, svetainės paiešką, laiką. Jie turi atributus, jų pagalba atpažįstami atskiri elementai. Kaskadiniai stiliaus lapai yra atsakingi už dizainą, o „Javascript“ – už dinaminius efektus.

Gerai sukurtas išdėstymas vienodai rodomas visose naršyklėse. Rezultatas nustatomas atlikus daugybę bandymų. Galimybė veikti daugiau nei vienoje aparatinės įrangos platformoje vadinama kelių platformų. Yra keli išdėstymo įgyvendinimo būdai, naudojami įvairūs karkasai.

Norint sukurti puslapius pagal šiuolaikinius standartus, naudojami įvairūs adaptyvaus maketavimo būdai. Taip užtikrinama, kad elementai būtų tinkamai rodomi visų tipų ekranuose.

Išdėstymo tipai

Standartai nuolat tobulinami, todėl keičiasi išdėstymo būdas. Šiuo metu yra 3 pagrindiniai puslapių tipai:

• statinis;
• guma;
• prisitaikantis.

Statiniai maketai – tai puslapiai, kurie negali pakeisti savo išvaizdos. Jų dizainas nesikeičia, o elementų matmenys turi aiškią reikšmę.

Interaktyvus išdėstymas reiškia, kad svetainės elementai prisitaikys prie naudojamo įrenginio ekrano dydžio. Keičiant dokumento plotį blokai perstatomi, vienos dalys pakeičiamos kitomis, vieni elementai išnyksta. Pritaikymo idėja pakeitė mobiliąsias svetainės versijas, kurios gyvena atskiruose subdomenuose. Pagrindinis pritaikomumo kūrimo principas – sukurti trijų ekranų dizainą: kompiuterio, planšetinio kompiuterio, išmaniojo telefono.

Kuriant sklandų išdėstymą taip pat atsižvelgiama į ekrano dydžio pokyčius ir koreguojami visi elementai. Pagrindinis skirtumas nuo prisitaikančio išdėstymo yra tas, kad išdėstymas išsiplečia arba susitraukia, kad tilptų ekrane kiekvieną keitimo momentą.

Galite patikrinti, kuris iš principų yra naudojamas taip. Jei ištempus naršyklės langą puslapis ištemptas kartu su juo, tai yra guminis išdėstymas. Kai svetainės puslapis pasikeičia tik keliose pozicijose, tai reiškia, kad jis yra prisitaikantis.

Reaktyvaus išdėstymo matmenys

Interaktyviuose išdėstymuose naudojami santykiniai vienetai, o ne standartinis statinis px. Dažniausiai:

Reaktyviame html, em naudojamas šrifto dydžiams ir užpildymui nustatyti. Pagal numatytuosius nustatymus 1 em yra lygus 16 pikselių. Atitinkamai, norėdami nustatyti p pastraipos šriftą iki 32 pikselių, turite nurodyti:

Vieneto naudojimo ypatumas yra tas, kad 1em yra lygus jo elemento šrifto dydžiui. Tai reiškia, kad 1em skirtingose ​​kodo dalyse įgyja skirtingas reikšmes. Pavyzdžiui, laukelyje, kuriame šrifto dydis yra 2 em (32 pikseliai), 1 em paraštė bus 32 pikseliai. Bet kai šriftas yra 1 em (16 pikselių), 1 em užpildymas bus lygus standartiniam 16 pikselių.

Rem yra šakninis em, kuris yra apibrėžtas žymoje. 1 šakninis em, skirtingai nei 1em, bet kokiomis aplinkybėmis yra lygus vienam skaičiui. Reikšmė keičiasi tik tada, kai pakeitimai yra priverstiniai.

Procentai paprastai naudojami blokų ar vaizdų pločiui nustatyti. Nepriklausomai nuo ekrano matmenų, jis atitiks nurodytą reikšmę, pavyzdžiui, 80%.

žiniasklaidos užklausos

CSS apima įvairių įrenginio techninių parametrų palaikymą. Apibrėžiamas išmanusis telefonas su maža ekrano raiška, jo vertei nurodoma stiliaus savybė. Žiniasklaidos užklausos atskleidžia orientacijos skirtumus: stačią ir gulsčią. Plačiai naudojamas kuriant adaptyvų išdėstymą. Išdėstymas prisitaiko prie nurodytos ekrano raiškos, dokumento struktūra keičiasi pagal kodą.

Apibrėžti įrenginių tipai:

• Brailio rašto prietaisai ir reljefiniai spausdintuvai akliesiems;
• spausdinami įprasti spausdintuvai;
• monitoriaus ekranas;
• Kalbos sintezatoriai kalba;
• tv televizoriai.

Užklausos pavadinimo reikšmėje nurodytos kelios sąlygos. Pavyzdžiui, rodyti turinį tik monitoriaus ekranuose ir tik didžiausią 600 pikselių plotį. Tai atrodo taip:

@medijos ekranas ir (maks. plotis: 600 piks.) (išvesties kodas).

Atsakingas dizainas pagrįstas medijos užklausų naudojimu. Sukuriamas išdėstymas ekranams, kurių minimalus plotis yra 1200 pikselių, kodo turinys dedamas į @media ekraną ir (maks. plotis: 1200 pikselių) ( ). Tada sukuriamas blokas planšetiniams kompiuteriams @media screen ir (min. plotis: 700 pikselių) ( ) ir mobiliesiems įrenginiams @media screen ir (maks. plotis: 699 pikseliai) ( ).

Pirmiausia mobilusis

Remiantis naujausiais rodikliais, mobilieji įrenginiai ir planšetiniai kompiuteriai prie interneto prisijungia daug dažniau nei kompiuteriai. Atitinkamai, mobiliojo ryšio srautas tampa reikšmingesnis svetainėms. Dėl tokių funkcijų, kaip mažas ekrano dydis, programėlių naudotojai teikia pirmenybę svetainėms iš pirmųjų paieškos rezultatų eilučių, jie praleidžia mažiau laiko ieškodami informacijos.

„Mobile First“ metodas yra svarbiausias turinio rodymas, lengva ir optimizuota svetainė, o ne kitų išteklių atsisiuntimas.

Adaptyvus svetainės išdėstymas pagal šią metodiką numato iš pradžių sukurti puslapį mažiems ekranams ir vėliau papildyti elementus, kaip reikalauja puslapio dizainas dideliam monitoriui. Nepaisant požiūrio skaidrumo, užsakovai ir rangovai deda daug pastangų, kad visiškai peržiūrėtų įprastą svetainės kūrimo būdą.

Bootstrap

Viena iš populiarių sistemų, davusių paprastą atsakymą į klausimą, kaip sukurti interaktyvų išdėstymą, yra „Twitter Bootstrap“. 12 stulpelių įkrovos tinklelio pagalba sukuriamos svetainės, kurios pagal numatytuosius nustatymus iškart teisingai rodomos mobiliųjų įrenginių ekranuose. Pagrindinės naudojamos priemonės yra:

• iš anksto nustatyti stulpelių pločiai, pagal kuriuos galima nustatyti elementų plotį;
• fiksuoti ir guminiai dokumentų komponentai;
• įtaisyti šriftai ir jų klasės;
• stalo projektavimo įrankiai;
• dizaino užsiėmimai meniu, įrankių juostose.

Dinaminiai efektai rašomi jQuery, išvaizdai apibūdinti naudojamas SASS pirminis procesorius, o funkcionalumas integruotas į populiarius žiniatinklio šriftus. Svetainės, sukurtos naudojant naujausią įkrovos versiją, netinkamai rodomos retai naudojamose naršyklės versijose, tokiose kaip IE8, IE9 ir iOS 6. Pažymėtina, kad kai kurių elementų šrifto dydžiai naudojami root ems. Oficialioje svetainėje yra išsamūs vadovai anglų ir rusų kalbomis, adaptyvaus išdėstymo pavyzdžiai, integruotų komponentų naudojimo būdai.

Fondas

Fondas yra galingas pagrindas, vienas pagrindinių „Twitter Bootstrap“ konkurentų. Palaiko bet kokius tinklelio dydžius, turi daug privalumų, kurių Bootstrap trūksta.

Komponentai išsiskiria daugybe skirtingų animacijos efektų, kuriuos galima konfigūruoti. SASS išankstinis procesorius naudojamas stiliams valdyti. Pagrindinių šablonų sąraše yra slankikliai, naršymo juostos, socialinės žiniasklaidos piktogramos.

Matmenys pateikiami pagal lentelėje pateiktas vertes.

mažas 0 vidutinis 420 piks. vidutinis 640 piks. didelis 1024 piks. xlarge 1200 piks. xx didelis 1440 piks.

Tinklelio išdėstymas

Kita sistema, kuri nusipelno dėmesio, yra tinklelio išdėstymas. Tai susikertančių vertikalių ir horizontalių linijų rinkinys. Jie sudaro stulpelius ir eilutes. Elementai dedami į tinklelį, jų dydžiai nurodomi pagal eilutes ir lenteles. Galima naudoti fiksuotus dydžius, pvz., px, ir lanksčius, pvz., procentus, rem ir em.

Pirmiausia reikia deklaruoti tinklelio konteinerį.

Ypatybė grid-template-columns naudojama eilutės pločiui nustatyti, o ypatybė grid-template-rows – stulpelio pločiui. Dydžiai gali būti nurodyti vienoje tinklelio-šablono-stulpelių savybėje. Juostų plotis matuojamas fr vienetais, tai yra dalis talpykloje esančios vietos. Galima naudoti fx ir px vienoje nuosavybėje. Pavyzdžiui, tinklelis-šablonas-stulpeliai: 500 piks. 1fr 2fr.

Išvada

Visapusiška interaktyvaus išdėstymo nuo A iki Z praktika apima kuo daugiau būdų. Norėdami nuo nulio suprasti, koks yra visų įrenginių išdėstymas, turite rankiniu būdu naudoti medijos užklausas, apskaičiuoti vaizdų ir šriftų dydžius. Įgiję atitinkamų įgūdžių, galite pradėti naudoti karkasus.

Kijevo gatvė, 16 0016 Armėnija, Jerevanas +374 11 233 255

Sveiki visi!

Kai man pasirodė adaptyvaus išdėstymo principas, tai pasirodė košmaras, iš kurio iki šiol negaliu atsigauti, tai toks kančia - juk kiekvienai rezoliucijai praktiškai reikia apversti maketą, rašyti naują kodą, pasirodo daug kodo, kurį sunkiau prižiūrėti. Šį skausmą suprasime pavadinimu „kodo entropija“

Neseniai man buvo duotas mobiliosios aplikacijos maketas ir nusprendžiau pagaliau pabandyti įveikti šį skausmą, padaryti jį gražų ir glaustą – naudoti rem. Man tai atrodė paprasčiausias sprendimas, 100% mobiliųjų naršyklių palaiko šį įrenginį. Esmė ta, kad html žymai rašome keletą medijos užklausų eilučių, nurodydami tik pagrindinius šrifto dydžius pikseliais, proporcingai tam, kaip turėtų atrodyti mūsų išdėstymas skirtingomis raiškomis, o likusią išdėstymo dalį įvedame be medijos užklausų kaip įprasta, tik vietoj pikselių naudojame rem. Ši technika lengvai keičia mastelį ir koreguoja išdėstymą priklausomai nuo pagrindinio šrifto dydžio.
Kodo sumažinimas ir pritaikymo išdėstymo paprastumas tokiu būdu yra tiesiog didžiulis!

Vienintelis šio metodo trūkumas buvo: reikėjo nuolat perskaičiuoti psd išdėstymo pikselius į rem, bet greitai išsprendžiau šią problemą – parašiau specialią funkciją ir rinkinį kaip anksčiau pikseliais, pats pirminis procesorius konvertavo į rem.

Bet! Pagrindinis pokštas yra tas, kad šią techniką panaudojau kurdamas adaptyvią mobiliąją aplikaciją, kur dizainas buvo toks pat.

Kai grįžau į adaptacinį įprastoms svetainėms skausmas grįžo į mane su didesne galia nei anksčiau nes paprastai turime nuo 3 iki 6 skirtingų dizainų:
1) Didelis darbalaukis 1600–1920 pikselių
2) Mažas stalinis/nešiojamas ~1100-1400 pikselių
3) Senoji Monique / Planšetinis kompiuteris - 768-1024 pikseliai
4) Per mažas planšetinis kompiuteris / per didelis išmanusis telefonas ~ 600 pikselių
5) Išmanusis telefonas 300-480
6) Senas išmanusis telefonas 250 pikselių.

Žinoma, perdėjau, bet būtinai reikia padaryti bent tris maketus.

Taigi čia yra klausimas numeris 1 ir svarbiausias: kaip sumažinti adaptyvų išdėstymą ir padaryti kodą gražų? Kaip sumažinti vadinamąjį. kodo entropija? Ar yra koks nors šaunus požiūris/metodas?

Peržiūrėjau įvairias šaunių internetinių studijų svetaines, kad rasčiau atsakymą ir pamačiau, kad visi rinko atsitiktinai, tai yra apskritai nesivargindamas.
Vienintelis dalykas, kurį pamačiau, yra tai, kad kai kurie žmonės kažkodėl šriftams naudoja em ir procentus, o ne įprastus pikselius. Atrodo kaip teksto mastelio keitimui, nors neaišku, kaip tai sumažina adaptacijos kodą, mano nuomone, tai tik viską apsunkina - reikia atlikti skaičiavimus priklausomai nuo pagrindinio bloko šrifto dydžio ir net pirminiai procesoriai greičiausiai to nepadarys padekit... Nezinau kodel reikia maudytis garine pirtimi nustatant šrifto dydzius em vienetais, bėdos su rem vis tiek niekur nedingo... Gal aš blogas maketuotojas... Atkakliausios iš tų svetainių naudojo jas paraštėms ir kitoms dėžutės dydžio savybėms...
2 klausimas:
Kokia prasmė juos naudoti?
Ir iš karto klausimas numeris 3:
Ar tikrai nėra vienos metodikos, ar tikrai toks blogas maketavimas, kad visi nori daryti taip, kaip nori ir.... apgaudinėti? O gal mačiau blogų pavyzdžių (nors ieškojau tarp populiariausių temų miško temų ir populiariausių interneto studijų svetainių)?

Reaktyvus svetainės išdėstymas – pamokos pradedantiesiems. Vis dažniau Web Council tinklaraščio skaitytojai savo laiškuose užduoda klausimų apie adaptyvų svetainės išdėstymą. GERAI! Jei turite klausimų, kviečiame! Šiuo įrašu atidarau naują tinklaraščio skiltį, skirtą tik adaptyviam svetainės išdėstymui.

Tiems, kurie nėra rezervuare ir pirmą kartą girdi apie šią naujovišką (nuo 2012 m.) funkciją, trumpas paaiškinimas:

Adaptyvus išdėstymas skirta automatiškai pritaikyti svetainę prie skirtingų ekrano dydžių ekrano įrenginių: stalinių kompiuterių, televizorių, planšetinių kompiuterių, išmaniųjų telefonų ir kitų mobiliųjų telefonų.

Čia reikėtų pateikti vieną labai svarbų paaiškinimą dėl įvairių panašių šiuolaikinio interneto dizaino apibrėžimų, būtent: prisitaikantis Ir responsive web dizainas. Daugelis žmonių klaidingai mano, kad jie yra vienas ir tas pats. Bet taip nėra.

Prisitaikantis prieš reaguojantį

Pirma, būtina atskirti adaptyvus interneto dizainas (adaptuojamas interneto dizainas) Ir adaptyvus išdėstymas. Tai visiškai skirtingos sąvokos. Interaktyvus interneto dizainas yra visuotinis požiūris į svetainių dizainą, o Adaptyvus išdėstymas- tik specialus išdėstymo metodo atvejis responsive web dizainas.

Reaktyvus ir reaguojantis interneto dizainas skiriasi kaip diena ir naktis. Be to, galime drąsiai teigti, kad interaktyvus interneto dizainas yra nedidelė (nors ir pakankamai savarankiška) interaktyvaus interneto dizaino dalis.

Pagrindinis išdėstymo skirtumas yra stilių failo rašymo būdas. Responsive daro prielaidą, kad stiliaus faile bus visiškai nurodyti visi galimi naudojamų peržiūros įrenginių dydžiai, o adaptyvusis įkelia tik tuos stilius, kurie yra būtini kiekvienam konkrečiam įrenginio tipui.

Be to, responsive įkelia tiek pat svetainės detalių tiek staliniams kompiuteriams, tiek mobiliesiems, optimizuodama blokų dydžius ir jų turinį, o adaptive tokiam kompiuteriui gali įkelti visą svetainę, o mobiliajam – tik dalį, ką nors pašalindama, jei ne labai. svarbu siekiant palengvinti svetainės kūrimą ir atitinkamai padidinti atsisiuntimo greitį.

Nėra prasmės daugiau diskutuoti šia tema. Užtenka pasakyti, kad šiandien labai paklausus yra responsive web dizainas, bet su adaptyviu išdėstymu :) Tikiuosi, kad po tokio trumpo nukrypimo dabar nesupainiosite terminų. Norintiems daugiau sužinoti šia tema galiu patarti paskaityti ir.

GERAI! Suprato apibrėžimus. Tęskime pasakojimą apie adaptyvų svetainių išdėstymą, o tai reiškia, kad kalbame apie interaktyvų interneto dizainą.

Interaktyvaus išdėstymo pranašumai

Interaktyvaus svetainės išdėstymo arsenale yra du pagrindiniai ginklai:

1. Visi išdėstymo elementai yra "guma" (lankstus)- jų dydžiai priklauso nuo rodymo įrenginio ekrano dydžio.

2. Žiniasklaidos užklausos- atskira stiliaus failo dalis, apibrėžianti skirtingus stilius, atsižvelgiant į ekrano įrenginių ekrano dydžius ir jų vietą erdvėje (stačias arba gulsčias).

Kalbant apie „gumumą“, ši bandelė nustatyta senu geru būdu:

Be to, kad svetainė nesusiteptų ant per didelių monitorių, stiliaus faile įrašoma ši taisyklė:

#turinys(
maksimalus plotis: 1200 pikselių
}

Taip yra, jei nenorite, kad svetainės plotis viršytų 1200 pikselių (tai priklauso nuo jūsų). Čia yra tam tikras pojūtis. Faktas yra tas, kad patogus skaitomo teksto plotis yra ne daugiau kaip 10–12 žodžių eilutėje. Jei straipsnis ištemptas (pavyzdžiui, žiūrint svetainę per televizorių) nuo krašto iki krašto, skaityti tokį tekstą bus labai sunku.

Pritaikomame išdėstyme galioja ne tik gumos naudojimas dideliems blokams, bet ir medijos turiniui: paveikslėliams, vaizdo įrašų intarpams ir kt. Tai taip pat lengvai nustatoma stiliuose:

img, įterpti, vaizdo įrašas (
maksimalus plotis: 100 %
}

Sumažinus naršyklės langą, visos nuotraukos, vaizdo įrašai ir kiti elementai bus proporcingai sumažinti, neišlipant iš pirminio bloko kraštų.

Tačiau apie žiniasklaidos užklausas plačiau pakalbėsime kitą kartą. Palaikykite ryšį!

Pritaikomas svetainių išdėstymas | Įvadas