Html adaptīvais izkārtojums. Adaptīvs izkārtojums

Sveiki visiem!

Kad parādījās adaptīvā izkārtojuma princips, man tas izrādījās murgs, no kura joprojām nevaru atgūties, tā ir tāda sāpe - galu galā katrai izšķirtspējai praktiski ir jāpārkārto izkārtojums, jāraksta jauns kods, jūs galu galā iegūstat daudz koda, kuru ir grūtāk uzturēt. Sapratīsim šīs sāpes kā "koda entropiju"

Nesen man tika dota iespēja izveidot izkārtojumu mobilajai aplikācijai un nolēmu beidzot mēģināt pārvarēt šo sāpi, padarīt to skaistu un kodolīgu - izmantot rem. Šis man šķita vienkāršākais risinājums, 100% mobilo pārlūkprogrammu atbalsta šo vienību. Lieta ir tāda, ka html tagam mēs rakstām vairākas multivides vaicājumu rindas, norādot tikai pamata fontu izmērus pikseļos proporcionāli tam, kā mūsu izkārtojumam vajadzētu izskatīties dažādās izšķirtspējās, un pārējais izkārtojums bez multivides vaicājumiem tiek izkārtots kā parasti, tikai mēs izmantojam pikseļus vietā rem. Šis paņēmiens ir viegli mērogojams un pielāgo izkārtojumu atkarībā no pamata fonta lieluma.
Koda samazināšana un adaptīvā izkārtojuma vienkāršība šādā veidā ir vienkārši kolosāla!

Šai metodei bija tikai viens trūkums: bija nepieciešams pastāvīgi pārrēķināt psd izkārtojuma pikseļus uz rem, taču es ātri atrisināju šo problēmu - uzrakstīju īpašu funkciju un izkārtoju to tāpat kā iepriekš pikseļos, pats priekšprocesors pārtulkoja rem.

Bet! Galvenais joks ir tas, ka es izmantoju šo metodi, lai izstrādātu adaptīvu mobilo aplikāciju, kur dizains bija vienāds.

Kad atgriezos pie adaptīvā parastajām vietnēm- sāpes manī atgriezās vēl jaudīgāks nekā iepriekš, jo parasti mums ir no 3 līdz 6 dažādiem dizainiem:
1) Liela darbvirsma 1600-1920 pikseļi
2) Mazs galddators/klēpjdators ~1100-1400 pikseļi
3) Vecā Monika/planšetdators - 768-1024 pikseļi
4) Nepietiekams planšetdators/liela izmēra viedtālrunis ~600 pikseļi
5) Viedtālrunis 300-480
6) Vecais viedtālrunis 250 pikseļi.

Es, protams, pārspīlēju, bet vismaz trīs maketi noteikti ir jāizdara.

Tātad, šeit ir jautājums Nr. 1 un vissvarīgākais: kā samazināt adaptīvo izkārtojumu un padarīt kodu skaistu? Kā samazināt t.s koda entropija? Vai ir kāda forša pieeja/tehnika?

Apskatījos dažādas foršu tīmekļa studiju vietnes, lai tur atrastu atbildi, un redzēju, ka visi klāstīja nejauši, tas ir, kopumā netraucējot.
Vienīgais, ko redzēju, ka daži nez kāpēc fontiem izmanto em un procentus, nevis parastos pikseļus. Šķiet, ka teksta mērogošana, lai gan nav skaidrs, kā tas samazina adaptācijas kodu, manuprāt, tas tikai sarežģī visu - jums ir jāveic aprēķini atkarībā no galvenā bloka fonta lieluma un pat priekšapstrādātāji, visticamāk, to nedarīs palīdzēt... Nezinu, kāpēc jāuztraucas par fontu izmēru iestatīšanu em vienībās, problēmas ar rem joprojām nekur nepazuda... Varbūt esmu slikts maketētājs... Starp citu, spītīgākās no šīm vietnēm izmantoja em piemalei un citiem kastes izmēra īpašumiem...
2. jautājums:
Kāda jēga tos lietot?
Un tagad jautājums numur 3:
Vai tiešām nav vienotas metodikas, vai tiešām izkārtojumā viss ir tik slikti, ka katrs var darīt, ko grib? Vai arī es redzēju neveiksmīgus piemērus (lai gan es meklēju starp populārākajām themeforest tēmām un populārākajām tīmekļa studiju vietnēm)?

Priekšvārds

Šobrīd mobilo sakaru trafika daļa strauji pieaug. Katru dienu arvien vairāk cilvēku izmanto ierīces ar piekļuvi internetam. Tālrunis vienmēr ir pa rokai, jebkurā vietā, kur cilvēki var meklēt nepieciešamo informāciju, lasīt ziņas utt. Parastā mājaslapa ir apskatāma, izmantojot mobilo ierīci. Tomēr skatoties rodas dažas nianses - lai lasītu atsevišķus teksta blokus salīdzinoši mazā ekrānā, ir nepieciešams lapas mērogs. Rezultātā tiek zaudēta lasāmība un ērtības, un vietne ir nepārtraukti jāritina, jāizstiepj un jāpalielina. Daudzas vietņu vadīklas ir grūti lietojamas, jo lapas nav paredzētas darbināšanai, pieskaroties ekrānam. Lai atrisinātu šīs problēmas, viņi sāka izstrādāt tīmekļa vietnes, kas var ērti attēlot informāciju jebkurā ierīcē.

Par rakstu

Šis raksts ir paredzēts izstrādātājiem, kuriem ir pieredze vietņu izkārtošanā un kuri zina HTML Un CSS kuri saprot CSS selektoru mērķi utt.

Šajā rakstā tiks apspriesti izkārtojumu veidi, kas ļauj pareizi attēlot vietnes jebkurā izšķirtspējā, un metodes, ar kurām tas tiek paveikts. Apskatīsim koncepciju CSS- ietvaru un veikt populārāko salīdzinošo analīzi.

Izkārtojumu veidi

Apskatīsim galvenos izkārtojumu veidus, to atšķirības un to īstenošanā izmantotos pamatprincipus.

Fiksēts izkārtojums

Fiksētais izkārtojums ir pieeja noteikta platuma vietņu lapu izveidei. Komponentu platums lapā nemainās. Zemas izšķirtspējas monitoros tiek parādīta horizontāla ritjosla. Šāda veida izkārtojums nav piemērots ērtai informācijas attēlošanai mobilajās ierīcēs.
Tālāk esošajā piemērā ir parādīta stingra taga platuma iestatīšana ķermeni:

Gumijas izkārtojums

Elastīgais izkārtojums nozīmē vietnes komponentu iespēju mainīt izmērus atkarībā no pārlūkprogrammas loga lieluma, kas stiepjas no un līdz norādītajiem minimālajiem un maksimālajiem izmēriem. To panāk, izmantojot relatīvās vērtības, max-platums / min-platums(maks./min platums), maksimālais augstums / min augstums(maksimālais/minimālais augstums).
Gumijas izkārtojuma metožu izmantošanas piemēri:

Adaptīvs izkārtojums

Adaptīvs izkārtojums ( Adaptīvais izkārtojums ) ļauj galvenajam konteineram un jebkuram citam vietnes elementam pielāgoties ekrāna izšķirtspējai, ļaujot mainīt fonta lielumu, objektu izvietojumu, krāsu utt. Tas notiek dinamiski, piemēram, izmantojot multivides vaicājumus ( @media), ļaujot automātiski noteikt monitora izšķirtspēju, ierīces veidu un aizstāt norādītās vērtības automātiskajā režīmā. Tālāk sniegtajā piemērā ir iestatīts platums div vienāds 960 pikseļi 1200 pikseļi Un 320 pikseļi visām ierīcēm, kuru platums ir mazāks 480 pikseļi.

Atsaucīgs izkārtojums

Adaptīvais izkārtojums ir plūstoša un adaptīva izkārtojuma kombinācija. Šī pieeja izmanto gan multivides vaicājumus, gan komponentu platuma procentuālo specifikāciju. Izmantojot šāda veida izkārtojumu, mēs varam droši teikt, ka vietne pielāgosies jebkurai ierīcei.
Platums ir iestatīts zemāk div vienāds ar 50% no vecākkomponenta lieluma visām ierīcēm, kuru platums ir mazāks par 1200 pikseļiem, un 100% no visām ierīcēm, kuru platums ir mazāks par 480 pikseļiem.

Pamatmetodes vietņu ieviešanai jebkurā izšķirtspējā Relatīvās vērtības

Relatīvo vērtību izmantošana ļauj lapā parādīt informāciju un komponentus, nezaudējot lasāmību vai skatāmību.

Izmēru un polsterējumu relatīvās vērtības

Var norādīt relatīvās vērtības platums, augstums, mala, polsterējums utt. Vispazīstamākais veids, kā norādīt relatīvo lielumu, ir procentos (%).
Tālāk ir sniegts piemērs platuma iestatīšanai uz 90% no vecākkomponenta lieluma.

Šajā gadījumā vērtību aprēķina attiecībā pret pamatkomponentu.
Ir arī vērtības attiecībā uz ekrāna izmēru:

• vw- 1% no loga platuma. Samazinot loga platumu, tiek samazināts elementa platums, augstums un fonts;
• vh- 1% no loga augstuma. Samazinot loga augstumu, tiek samazināts elementa platums, augstums un fonts;
• vmin — atlasiet mazāko no vw Un vh;
• vmax - tiek atlasīts lielākais vw Un vh.

Zemāk ir lietošanas piemērs vw Un vh. Šajā gadījumā atzīmes platums un augstums div būs vienāds ar attiecīgi 50% no ekrāna platuma un augstuma.

Fonta lieluma relatīvās vērtības

Pastāv šādas fontu relatīvās vērtības:

• em- nosaka izmēru attiecībā pret vecākfontu;
• rem- iestata lielumu attiecībā pret fontu.

Apskatīsim piemēru:

Aprēķiniet atzīmes fonta lielumu ķermeni. Šajā piemērā fonta lielums ķermeni norādīts attiecībā pret izmēru html. Tātad fonta lielums ķermeni būs vienāds ar 30 px (20px * 1.5 = 30px).

Varat arī iestatīt relatīvos fontu izmērus, izmantojot %, vw, vh utt. Nākamajā piemērā fonta lielums ķermeni vienāds ar 80% no fonta lieluma html - 16px.

Maksimālie un minimālie komponentu izmēri

Lai iestatītu komponenta platuma un augstuma maksimālo un minimālo vērtību, izmantojiet rekvizītus max-platums / min-platums Un maksimālais augstums / min augstums attiecīgi.

Apskatīsim piemēru:

Pieņemsim, ka šī galvenā sastāvdaļa div ir ķermeni. Pēc tam, mainoties ekrāna platumam, šī komponenta platums būs 60% no platuma ķermeni. Tomēr tas palielināsies tikai līdz summai, kas norādīta maksimālais platums, tas ir 500 px. Tiklīdz konteiners sasniegs šo platumu, tas pārtrauks augt.

Multivides vaicājumu izmantošana

Multivides vaicājumi ļauj norādīt stilus noteiktam ekrāna izmēram, ierīces veidam, pamatojoties uz ierīces īpašībām utt. Visi multivides vaicājumi sākas ar @media, un pēc tam seko nosacījumam.

Izmantojot multivides vaicājumus, varat iestatīt stilus šādiem ierīču veidiem:

• visi- visi veidi (noklusējuma vērtība)
• Braila raksts- uz Braila sistēmas balstītas ierīces, kas paredzētas lasīšanai neredzīgiem cilvēkiem
• reljefs- printeri, kas drukāšanai izmanto Braila sistēmu
• rokas- viedtālruņi un līdzīgas ierīces
• drukāt- printeri un citas drukas ierīces
• projekcija- projektori
• ekrāns- monitora ekrāns
• runa- runas sintezatori, kā arī programmas teksta atskaņošanai skaļi
• tty- ierīces ar fiksētu rakstzīmju izmēru
• tv- televizori.

Div tagu platuma iestatīšanas piemērs monitoru ekrānos, viedtālruņos utt.

Saites uz adaptīvā izkārtojuma ieviešanas paņēmieniem

Varat skatīt un izpētīt šajā rakstā un citas aplūkotās pieejas sīkāk, izmantojot šīs saites:

• Vai mums vajadzētu izveidot mobilo versiju? 5 izplatītas problēmas, kuras atrisina adaptīvais izkārtojums. Yandex pieredze

CSS ietvari

CSS-framework - ietvars, kas izveidots, lai vienkāršotu maketētāja darbu, paātrinātu izstrādi un novērstu maksimāli iespējamo izkārtojuma kļūdu skaitu (saderības problēmas ar dažādām pārlūkprogrammu versijām utt.). Šīs sistēmas ietver dažādu pieeju izmantošanu, lai pareizi parādītu vietnes jebkura izmēra ierīcēs.
Daudzi izstrādātāji dod priekšroku lietošanai CSS-frameworks, nevis rakstīt visus stilus manuāli. Tas ir saistīts ar šādiem iemesliem:

• Ātrāka attīstība
• Vairāku pārlūkprogrammu atbalsts
• Atbalsta dažādas ierīces un ekrāna izmērus
• Koda konsekvence, strādājot komandā, samazina domstarpības izstrādes laikā.

Tāpat kā skriptu programmēšanas valodu bibliotēkas, CSS-bibliotēkas, kurām parasti ir ārējs izskats CSS-fails tiek pievienots tīmekļa lapas galvenē.

Apskatīsim populārākos CSS- ietvari.

Bootstrap

Populārākais ietvars atsaucīgai un mobilai attīstībai tīmeklī- projekti. Bootstrap ir atvērtā pirmkoda rīks vietņu izstrādei, izmantojot HTML, CSS un JS. Bootstrap- intuitīvi vienkāršs un tajā pašā laikā spēcīgs interfeisa ietvars, kas palielina ātrumu un atvieglo attīstību tīmeklī- lietojumprogrammas.

Bootstrap Viegli un efektīvi mērogojiet savu projektu, izmantojot vienu kodu bāzi — no tālruņiem un planšetdatoriem līdz galddatoriem. Šim nolūkam tiek izmantots 12 kolonnu režģis:

Papildus tam CSSšis ietvars ietver atbalstu diviem populārākajiem CSS-priekšprocesori: Mazāk Un Sass.

Atšķirīgās iezīmes:

• 12 - kolonnu režģis
• Liels skaits lietošanai gatavu komponentu
• Atbalsts Mazāk Un Sass
• Lietošana Normalize.css.

Bootstrap materiāla dizains

Bootstrap materiāla dizains ir atvērtā pirmkoda lietojumprogrammu izstrādes rīkkopa, kuras pamatā ir Bootstrap un izmantojot pieejas Materiālu dizains.
Ietvars ļauj ātri izveidot lietojumprogrammu, izmantojot mainīgos Sass, adaptīvais režģis, liels skaits gatavu komponentu un jaudīgi spraudņi, kas ieviesti jQuery.

Atšķirīgās iezīmes:

• 12 - kolonnu režģis
• Liels skaits lietošanai gatavu komponentu saskaņā ar koncepciju Materiālu dizains.

Neesmu profesionālis mājaslapu dizaina un maketēšanas jomā. Būtībā visas manas darbības šajā virzienā ir saistītas ar nelieliem labojumiem esošajās veidnēs. Bet kādu dienu man ļoti gribējās izdomāt, “kā tas darbojas”, un vienā rakstā apkopoju pamatnoteikumu kopumu responsīvas vietnes veidnes izveidei.

Pielāgošanās spējas jēdziens

Pielāgojamība ir jāsaprot kā vietnes izkārtojums, kurā vietnes izskats mainās atkarībā no ierīces, kurā vietne tiek skatīta, izšķirtspējas un ekrāna orientācijas. Turklāt visas izmaiņas tiek veiktas, lai atvieglotu šādas vietnes lietošanu mobilajās ierīcēs.

Adaptīvais izkārtojums ļauj vienlīdz ērti apskatīt vietni ne tikai datora monitorā, bet arī mobilā tālruņa (viedtālruņa) ekrānā, nezaudējot funkcionalitāti.

Multivides vaicājumi adaptīvam izkārtojumam

Lai mainītu vietnes izkārtojumu un atbilstošo stilu, tiek izmantoti multivides vaicājumi, kas aktivizē vienu vai otru kodu atkarībā no ekrāna platuma. Lai multivides vaicājumi darbotos un veidne būtu adaptīva, vietnes galvenes sadaļā HEAD ir jāievieto šāda koda rindiņa:

Pielāgošanās spējas pamatprincipi

Tā kā mobilo ierīču (viedtālruņu, planšetdatoru) ekrāna izmērs ir ievērojami mazāks par datora monitora ekrānu gan izmēra, gan izšķirtspējas ziņā. Adaptīvā dizaina galvenais uzdevums ir samazināt vietnes lapas platumu mobilo ierīču apmeklētājiem.

Un tas tiek panākts divos veidos:

Bloku dzēšana (slēpšana) un/vai to pārdalīšana savā starpā;

Mainiet bloku izmērus atkarībā no ekrāna platuma.

Klasisks piemērs ir sānjoslas kolonnas pārvietošana zem galvenā satura.

Tajā pašā laikā sānjoslas platums kļuva vienāds ar galvenā satura platumu, un tie abi, savukārt, izstiepās visā ekrāna platumā.

Kā noņemt sānjoslas bloku atkarībā no ekrāna platuma

Ļaujiet man sākt ar faktu, ka modernāko veidņu iezīmēšana tiek īstenota, izmantojot blokus. Horizontālajai izvietošanai tiek izmantoti tā sauktie peldošie bloki, tas ir, ar FLOAT stilu. Attiecīgi, lai atceltu bloku horizontālo izvietojumu, skatoties mobilajās ierīcēs, ir jānoņem peldošā bloka stils.

Vienkāršākajā gadījumā CSS kods izskatīsies šādi:

@media only screen and (maksimālais platums: 1199px) ( .content(float: none;) .sidebar(float: none;) )

Tas jānovieto stila faila beigās, vismaz pēc tam, kad tas ir formatēts, lai to rādītu galddatoros.

Koda skaidrojumi: pirmajā rindā mēs sakām, ka šādi stili attieksies uz ierīcēm ar ekrāna platumu līdz 1199 pikseļiem ieskaitot. Šādām ierīcēm sānjosla vairs nav peldošs bloks un tiek parādīta tās secībā vietnes HTML kodā. Tāpēc, ja vēlaties, lai sānjosla tiktu parādīta pēc satura, sānjoslas kodam ir jāatrodas zem galvenā satura koda, piemēram:

... ...

Automātiskais bloka platums - gumijas izkārtojums

Jums vajadzētu strādāt arī ar satura bloku un sānjoslas platumu. Skatoties mobilajos klientiem, tie ir jāpadara par “gumiju”:

@media tikai ekrāns un (maksimālais platums: 1199 pikseļi) ( .content (width: 100%;). sidebar (width: 100%;) )

Izmantojot iepriekš minētos stilus, bloki stiepsies visā ekrāna platumā.

Adaptīvi attēli vietnei

Pēc tam, kad esam mainījuši bloku izvietojumu un izmēru, mums vajadzētu rūpēties par atlikušajiem vietnes elementiem. Galu galā daudzi no tiem var vienkārši neietilpt ekrānā, piemēram, attēli. Lai tos pielāgotu mobilajiem klientiem, mēs izmantojam šādu kodu:

Img (maksimālais platums: 100%; augstums: automātisks;)

Problēma ar gariem vārdiem

Dažreiz horizontāla ritjosla var parādīties no ļoti gara vārda, ja tas neietilpst ekrānā. Piemēram, tas varētu būt komentārā atstāts URL. Vairāk par šo problēmu un tās risinājumu rakstīju iepriekš:. CSS kods reaģētspējas problēmu novēršanai izskatītos šādi:

Defise ( overflow-wrap: break-word; word-wrap: break-word; -webkit-defises: auto; -ms-defises: auto; -moz-defises: auto; defises: auto; )

Adaptīvā tīmekļa vietnes izvēlne

Ieteicams arī pielāgot vietnes izvēlni, it īpaši, ja tajā ir daudz vienumu, jo tas var aizņemt ievērojamu ekrāna daļu. Lai pēc iespējas vairāk atbrīvotu ekrānu izvēlnes saturam, tie parasti paslēpj izvēlni un tā vietā rāda pogu (saiti), noklikšķinot, izvēlne tiks parādīta ekrānā.

Lai īstenotu savu plānu, ir jāizveido divi viens otru izslēdzoši objekti. Piemēram, mobilo ierīču ekrānos galvenajai izvēlnei jābūt paslēptai, bet jāparādās pogai, kas atver šo izvēlni. Datora ekrānos ir otrādi: galvenajai izvēlnei ir jābūt redzamai, bet pogai tās izsaukšanai paslēptai.

To ir ļoti viegli ieviest CSS.

#mainmenu (display:block;) #mobilemenu(displejs:nav;) @tikai multivides ekrāns un (maksimālais platums: 1199 pikseļi) ( #mainmenu (displejs:nav;) #mobilemenu(displejs:bloķēt;) )

Tiklīdz ekrāna platums kļūst mazāks par 1200 pikseļiem, galvenā izvēlne pazudīs no ekrāna un parādīsies saite tās atvēršanai (precīzāk, tiks parādīts bloks ar saiti vai pogu).

Lūdzu, ņemiet vērā, ka šajā gadījumā tiek izmantoti bloku ID, nevis stila klase. Un galvenās izvēlnes kods izskatīsies apmēram šādi:

<div id="mainmenu">Vietnes galvenā izvēlne

Lai, noklikšķinot uz pogas, tiktu parādīta galvenā izvēlne, sadaļai HEAD pievienojiet nelielu skriptu:

funkcija showmobilemenu() ( if (document.getElementById("galvenā izvēlne").style.display == "bloķēt") (document.getElementById("galvenā izvēlne").style.display = "nav") else (document.getElementById(" galvenā izvēlne").style.display = "bloķēt") )

No autora: nākotnē interneta pasaulē sagaidāms pastāvīgs mobilo sakaru trafika pieaugums. Tas nozīmē, ka tagad jums ir jāspēj izveidot izkārtojumus, lai jūsu projekts izskatītos labi visās ierīcēs. Risinājums jau sen ir atrasts – adaptīvs mājas lapas izkārtojums! Mēs par viņu runāsim.

2 veidi, kā iepriecināt mobilo sakaru lietotājus

Vienkāršākais veids, kā noteikt vietnes izkārtojumu, ir samazināt loga izmēru. Ja parādās horizontāla ritjosla, tas ir fiksēts izkārtojums. Visi izmēri, visticamāk, tika norādīti pikseļos. Vai šī vietne būs ērta mobilo ierīču lietotājiem? Nē.

Būtībā šai problēmai ir divi risinājumi. Pirmais ir izveidot dažādas izkārtojuma versijas (personālajiem datoriem, planšetdatoriem un mobilajiem tālruņiem). Tieši tas tika darīts, piemēram, sociālajā tīklā Vkontakte. Otrā iespēja ir izveidot adaptīvu izkārtojumu. Šāda vietne reaģēs uz loga platuma izmaiņām. Šī iespēja mūsdienās tiek izmantota arvien biežāk.

Rīsi. 1. Kā redzat, webformyself labi tiek parādīts pat mobilajā tālrunī.

Pielāgošanās spēja ir ceļojuma sākums

Adaptīvais izkārtojums neatšķiras no parastā izkārtojuma, izņemot to, ka multivides vaicājumi tiek pievienoti stila lapai, kur stili ir norādīti dažādiem ekrāna platumiem. Dažreiz tie tiek ievietoti atsevišķā css failā, un dažreiz tie tiek rakstīti galvenā stila lapas beigās. Multivides vaicājuma piemērs:

@media tikai ekrāns un (maksimālais platums: 980 pikseļi)()

@media tikai ekrāns un (maksimālais platums: 980 pikseļi) ( )

Apskatīsim šo ierakstu tuvāk.

@media – mediju vaicājuma faktiskais apzīmējums

Ekrāns – mēs norādām, ka tas attiecas uz ekrānu (šeit varat norādīt arī televizoru vai projektoru). Tikai – nozīmē, ka noteikumi tiks piemēroti tikai ekrānam.

Un (un) — nosacījuma pievienošana, kurai multivides vaicājums darbosies. Nosacījums ir pievienots iekavās.

Maksimālais platums: 980 pikseļi — pats nosacījums. Vienkārši izsakoties, tas nozīmē, ka multivides vaicājums darbosies, ja ekrāna platums ir ne vairāk kā 980 pikseļi (tas ir, no 0 līdz 980 pikseļiem). Ja platums ir lielāks par 980, noteikumi nedarbosies. Visbiežāk šeit tiek izmantoti šādi nosacījumi: max-width, min-width, max-device-width, min-device-width. Pēdējie divi nozīmē, ka noteikumi darbosies tikai pašās mobilajās ierīcēs (tas ir, mainot loga platumu datorā, parādīsies horizontāla ritināšana). Varat arī norādīt maksimālo augstumu, taču tas tiek izmantots ļoti reti.

() – visi CSS noteikumi ir ierakstīti šajās krokainajās iekavās. To var būt tik daudz, cik vēlaties. Ļaujiet man sniegt dažus piemērus, lai jums būtu skaidrs:

@tikai ekrāns un (maksimālais platums: 980 pikseļi)( .selektors(fons: melns) ) @tikai multivides ekrāns un (min-platums: 600 pikseļi)( img(peldošs: pa kreisi))

@media tikai ekrāns un (maksimālais platums: 980 pikseļi) ( Selektors (fons: melns) @media tikai ekrāns un (min — platums: 600 pikseļi) ( img (peldēt: pa kreisi)

Pārtulkosim to cilvēku valodā: ja loga platums ir mazāks par 980 pikseļiem, tad noteikums (fons: melns) tiks piemērots elementam ar atlasītāja klasi. Vēl vienkāršāk sakot, šī elementa fons kļūs melns.

Otrais piemērs: ja loga platums ir lielāks par 600 pikseļiem, tad visi attēli tiks nospiesti uz kreiso malu.

Vai esat jau sapratuši šīs izkārtojuma metodes ģeniālo nozīmi? Būtībā, izmantojot multivides noteikumus, varat pielāgot esošos vai pievienot jaunus CSS noteikumus. Tādā veidā jūs varat ieviest pilnībā atsaucīgu veidni.

Rīsi. 2. Multivides vaicājuma piemērs, kas nosaka noteikumus platekrāna monitoriem.

Uzziniet vairāk par pielāgošanās spēju

Tas ir saprotams, bet kā pašam izveidot adaptīvu vietnes izkārtojumu? Lai to izdarītu, noteikti nepietiek ar to, ka pierakstīsit šos divus piemērus. Es ceru, ka jūs sapratīsit to būtību, taču no tiem ir maza nozīme. Mums vajag reālus ieguvumus. Un jūs to varat iegūt no. Bet tas ir tad, ja mēs uztveram pielāgošanās spēju nopietni. Fakts ir tāds, ka, tā kā kurss ir apmaksāts, pēc tā apguves jūs pats varēsit iemācīt citiem adaptīvo izkārtojumu.

Ja jums ir nepieciešams kaut kas vienkāršāks, lai to apgūtu, šis jums būs piemērots daudz labāk. Tas sastāv no piecām video nodarbībām, kas iepazīstinās jūs ar pamatiem. Kurss ir ļoti vienkāršs, informācija atlasīta īpaši iesācējiem. Tajā pašā laikā varēsiet apskatīt vairākus praktiskus piemērus, lai pēc tā izpētīšanas pats varētu pielāgot vienkāršu izkārtojumu.

Vai ir grūti apgūt adaptīvo izkārtojumu?

Kad es pirmo reizi sāku studēt tīmekļa tehnoloģijas, es pat īsti nezināju, kas ir adaptīvais vietnes izkārtojums. Man pašam to nebija iespējams izdarīt. Bailes ir mūsu galvenais ienaidnieks. Izrādījās, ka viss bija pavisam vienkārši. Un tagad, kad es dažreiz skatos uz adaptīvo veidņu kodu, es saprotu, cik viegli dažkārt ir ieviest pielāgojamību.

Kā pārbaudīt pielāgošanās spēju

Vienkāršākais veids, kā to izdarīt, ir pārlūkprogrammā. Piemēram, pārlūkprogrammā Google Chrome, nospiežot taustiņu F12, tiek parādīts atkļūdotājs. Tagad mēģiniet mainīt loga izmēru. Augšējā labajā stūrī redzēsit tā platuma vērtību. Tas ir ļoti ērti, lai ātri pārbaudītu izkārtojumu. Varu arī ieteikt responsivetest.net. Pakalpojums ir diezgan ērts un lieliski pārbauda pielāgošanās spējas.

Rīsi. 3. Turot nospiestu taustiņu F12, tiek parādīts atkļūdotājs. Tagad augšējā labajā stūrī mainot var redzēt pašreizējo loga platumu.

Kāpēc adaptīvs izkārtojums?

Raksta sākumā teicu, ka ir vēl viens veids, kā iepriecināt mobilos lietotājus – izstrādāt atsevišķas versijas dažādām ierīcēm. Kāds, jūsuprāt, ir vieglākais veids? Pielāgojamību ir daudz vieglāk īstenot. Tas ir tikai pāris simti papildu koda rindiņu, nevis atsevišķa vietnes versija, kuras dizains bieži ir ļoti atšķirīgs. Kā liecina prakse, mobilās versijas savām vietnēm izgatavo tikai lielie uzņēmumi, kas var atļauties tērēt vairāk naudas projektu izstrādei.

Visiem pārējiem tagad ir jācenšas pielāgot adaptīvais izkārtojums. Tā kā mobilā datplūsma tikai pieaugs, sāciet to ieviest tūlīt. Un tajā pašā laikā abonējiet mūsu emuāru, lai uzlabotu savas zināšanas vietņu veidošanā.