Adaptīvā maketēšanas nodarbības. Adaptīvs izkārtojums. Izmēru un polsterējumu relatīvās vērtības

Tehnoloģijas nepārtraukti uzlabojas, viedtālruņi un planšetdatori kļūst vēsāki, un lietotāji kļūst mobilāki. Šobrīd auditoriju skaits no mobilajām ierīcēm ir pārsniedzis lietotājus no personālajiem datoriem. Ne velti tas ir radījis veselu mobilo ierīču vietņu tendenci.

Piemēram, ja jūs atverat parastu vietni (bez adaptīvā izkārtojuma un mobilās versijas), izmantojot viedtālruni, tad, visticamāk, tā tiks atvērta lietotājam neērtā formā. Tie. saturs tiks rādīts pilnā apjomā, bet būs horizontāla ritināšana, kas ir slikti.

1. Adaptīvs mājas lapas izkārtojums – kas tas ir?

Adaptīvais vietnes izkārtojums ir html izkārtojums, kurā, atkarībā no pārlūkprogrammas loga lieluma, vietne tiek “pārveidota” lietotājam draudzīgā formā.

Vietnes mobilās versijas un adaptīvās versijas atšķirības

Nejauciet vietnes mobilo versiju un vietnes adaptīvo izkārtojumu. Mobilā versija atrodas atsevišķā apakšdomēnā un pilnībā dublē vietnes saturu. Adaptīvā vietnē ir tie paši lapu vietrāži URL, taču tā tiek ielādēta atkarībā no ierīces dažādi stili CSS, kas ļauj parādīt vietni ērtākā veidā.

2. SEO optimizācija un adaptīvais izkārtojums

Meklētājprogrammām pašlaik ir divi dažādi rezultāti (tie ir ļoti līdzīgi). Viens datoru lietotājiem, otrs mobilajiem. Ja vietne nav optimizēta mobilajām ierīcēm, tas tiek ņemts vērā negatīvs faktors un vietnes pozīcija tiks pazemināta par 2–3 (dažreiz vairāk). Tajā pašā laikā būtu loģiski, ja tiktu pazeminātas tikai mobilās versijas pozīcijas, taču prakse rāda arī, ka pasliktinās arī vietnes galvenās versijas pozīcijas.

Šo nevienlīdzību var izskaidrot ar to, ka meklētājprogrammas, visticamāk, apkopo uzvedības faktorus no galddatoriem un mobilajām ierīcēm. Rezultātā, protams, ja vietne netiks pielāgota, tās PF būs sliktāks un tas novilks vietnes galveno versiju.

3. Kā pārbaudīt vietnes atsaucību

Varat pārbaudīt vietnes atsaucību, tikai atverot to dažādās pārlūkprogrammās un mainot ekrāna platumu. Bet to darot no daudzām dažādām ierīcēm ar dažādu izšķirtspēju, ir ārkārtīgi laikietilpīga. Ir arī maz ticams, ka jums ir desmitiem viedtālruņu un planšetdatoru.

Internetā ir daudz ātrāks un vienkāršāks risinājums. Piemēram, pārlūkprogrammā Google Chrome varat instalēt īpašu Window Resizer spraudni un izmantot to, lai atvērtu vietni populārākajās izšķirtspējās.

Varat vienkārši manuāli mainīt pārlūkprogrammas loga platumu un redzēt rezultātu. Firefox vai Google Chrome ir adaptīvs pārlūkprogrammas dizains, nospiežot taustiņu kombināciju Ctrl+Shift+M.

Vissvarīgākais nosacījums ir nodrošināt, lai lapā nebūtu horizontālas ritināšanas un Flash spraudņu.

Google bija pirmais, kas savā meklēšanas algoritmā ieviesa pielāgojamības faktoru. Viņam ir īpašs bezmaksas pakalpojums, kas analizē jebkuru vietni, lai optimizētu tās mobilajām ierīcēm. Yandex šo funkcionalitāti ieviesa nedaudz vēlāk.

Pēc pārbaudes ir divas iespējas. Vai nu vietne ir optimizēta, vai arī tā nav:

Piemēram, Google atsaucības tests:

Pielāgošanās spējas pārbaude pakalpojumā Yandex:

4. Kā izveidot responsīvu mājas lapas izkārtojumu

Tikai persona, kas saprot CSS un html, var izveidot adaptīvu vietnes izkārtojumu. Mēs apskatīsim galvenos punktus, jo nav vienas receptes.

Lai izveidotu adaptīvu izkārtojumu, jums ir jāizveido CSS stila lapas trešajā versijā. Pastāv atšķirība starp 2 un 3, taču šajā jautājumā ļoti svarīgs ir absolūto vērtību trūkums stilos. Īsāk sakot, visas bloka lieluma vērtības ir garums, platums, izmēri - tas viss ir norādīts procentos.

CSS @Media sintakse

@media device_type and|not|only (media_features) ( ... Stilu apraksts... )

Piemēram, uzrakstīsim nosacījumus, kādos stili darbosies ierīcēm, kuru ekrāna platums ir mazāks par 800 pikseļiem.

@media ekrāns un (maksimālais platums : 800 pikseļi ) ( ... stili ... ) Piezīme

Stili jāraksta secīgi no augstas izšķirtspējas līdz mazam, tas ir, vispirms vispārīgiem stiliem un pēc tam “apgrieztiem” izmēriem, piemēram:

Tikai @multivides ekrāns un (maksimālais platums: 1280 pikseļi) (...) )

Galvenes tagos jāiekļauj šāda rinda:

Skatvietas metatags norāda, ka ekrāna platums ir pārlūkprogrammas platums, un katrs pikselis atbilst vienam pikselim ierīcē. Ja tas nav norādīts, pielāgošanās spēja netiks ieviesta.

5. Adaptīvā mājas lapas izkārtojuma praktiskie piemēri 5.1. Ļoti garu vārdu pielāgošana

Piemēram, lapā būs ļoti garš vārds, un tad, ja pārpildes rekvizīts nav iestatīts, tas var izraisīt horizontālas ritināšanas parādīšanos. Lai no tā izvairītos, saturam jāpievieno šādi CSS rekvizīti:

.hphns ( overflow-wrap : break-word ; word-wrap : break-word ; -webkit-defises : auto ; -ms-defises : auto ; -moz-hyphens : auto ; defises : auto ; ) 5.2. Adaptīvā tīmekļa vietnes izvēlne

Vietnes sānjosla parasti aizņem aptuveni 200–300 pikseļu platumu, kas aizņem gandrīz visu pārlūkprogrammas platumu mobilās ierīces. Tāpēc nolaižamās izvēlnes visbiežāk tiek veidotas, izmantojot standarta pogu trīs sitienu veidā (tas jau ir kļuvis par klasiku).

Varat to ieviest vietnē, taču jums būs nedaudz jāpielāgojas stili. Apskatīsim visu soli pa solim.

Situācija, kad mums ir izvēlne un galvenais saturs (es neuzzīmēju galveni un kājeni):

Šādas struktūras HTML kods varētu būt apmēram šāds:

korpuss (marža-kreisais: 10%; platums: 70%; apmale: 1px solid #eee; ) #menu (platums: 20%; augstums: automātisks; pludiņš: pa kreisi; ) #content (platums: 70%; augstums: auto ; pludiņš : pa kreisi ; apmale pa kreisi : 1px solid #000 ; polsterējums : 1% ; ) Izvēlne

Saite 1. izvēlnē
Saite 2. izvēlnē
Saite 3. izvēlnē
Saite 4. izvēlnē

Lapas nosaukums

Lapas saturs

Pārvērš lapā uz

Šīs metodes trūkums ir tāds, ka pie mazas izšķirtspējas izvēlne aizņems gandrīz visu laukuma platumu, kas nozīmē, ka parādīsies horizontāla ritināšana vai, vēl ļaunāk, visi bloki var peldēt.

Pārveidosim savu piemēru šādi. Ja ekrāna izšķirtspēja ir mazāka par 800 pikseļiem, izvēlne pazudīs un parādīsies īpaša atvērtās izvēlnes poga.

Šeit ir adaptīvā izkārtojuma html kods ar komentāriem:

pamatteksts (piemale-kreisais: 10%; platums: 70%; apmale: 1px solid #eee; ) #menu (platums: 20%; augstums: auto; peldēšana: pa kreisi; displejs: bloks; ) #saturs (platums: 70% ; augstums : auto ; pludiņš : pa kreisi ; apmale pa kreisi : 1px solid #000 ; polsterējums : 1% ; ) #mob_menu (displejs: nav ; ) @tikai multivides ekrāns un (maksimālais platums: 800 pikseļi) ( #menu ( displejs : none ; ) #mob_menu ( displejs : bloks ; ) #content ( skaidrs : abi ; ) ) funkcija showmobmenu() ( if ( == "bloķēt ") ( document.getElementById("menu").style.display = "nav " ) else ( document.getElementById("menu").style.display = "bloķēt " )) Izvērst izvēlni ↓Izvēlne

Saite 1. izvēlnē
Saite 2. izvēlnē
Saite 3. izvēlnē
Saite 4. izvēlnē

Lapas nosaukums

Lapas saturs

Samazināsim ekrāna platumu līdz 700 pikseļiem (piemēram). Lūk, kā tas izskatās lapā

Sveiciens, gadījuma apmeklētāji un regulārie emuāra vietnes lasītāji!

Šīs vietnes pastāvēšanas laikā es vairākas reizes mainīju veidni un pat izveidoju savu no nulles.
Viens no galvenajiem uzdevumiem, izvēloties jaunu veidni, ir adaptīvais vietnes izkārtojums visām ekrāna izšķirtspējām.

Īss raksta izklāsts:

Iepriekšējā rakstā jau rakstīju par to, kāpēc tas ir vajadzīgs. Bet kā panākt šo pielāgošanās spēju?

Ir dažādi veidi, kā to izdarīt. Daži izmanto javascript, daži izmanto kaut ko citu. Bet es uzskatu, ka visvienkāršākais un pareizākais veids ir adaptīvs, izmantojot CSS.

Kā izveidot responsīvu vietnes izkārtojumu

Pirmkārt, Ja izlemjat izveidot adaptīvu vietnes dizainu, ievietojiet starp tagiem šādu kodu:

Kāds es biju muļķis, ka es to neizdarīju uzreiz, kad mēģināju izveidot adaptīvu vietnes izkārtojumu!!!
Problēma ar mobilajām pārlūkprogrammām ir to vietņu izkārtojuma mērogošana, pat adaptīvās.

Iedomājieties, es uzzīmēju dizainu, pēc tam pierakstu visus nepieciešamos stilus un vaicājumus, pārbaudu vietnes pielāgojamību dažādās izšķirtspējās. Šķiet, ka viss ir kārtībā! Bet, atverot savu emuāru savā viedtālrunī, es redzu, ka vietne ir vienkārši sarukusi. Tas nepielāgojās mobilajai ierīcei, bet vienkārši samazināja fonta izmēru, attēlus utt.

Kā tā? Es sāku vēlreiz pārbaudīt visus stilus, lai redzētu, vai esmu pareizi uzrakstījis klases, un galu galā es pārbaudīju pārlūkprogrammas loga platumu pikseļos, izmantojot javascript. ES biju šokēts. Pārbaudot klēpjdatorā, es saņēmu rezultātu 1024 pikseļi, un es saņēmu apmēram tādu pašu rezultātu, atverot vietni viedtālrunī!

Bet tā nevar būt!

Izrādās, ja neierakstiet kodu, kuru norādīju iepriekš, mobilā pārlūkprogramma nesaprot, ka vietne ir adaptīva, un vienkārši mēģina samazināt vietnes lapu, lai tā ietilptu mobilā tālruņa mazajā ekrānā.

Sava stulbuma un nekompetences dēļ es zaudēju daudz laika. Bet tagad es to atceros uz visiem laikiem))).

Adaptīvā izkārtojuma CSS multivides vaicājumi

Lai padarītu to atsaucīgu, izmantojot CSS, jums ir jāizmanto multivides vaicājumi.

Kā tas ir? Jā, ļoti vienkārši. CSS failā jums jāieraksta vaicājumi, piemēram:

@multivides ekrāns un (minimālais platums: 1440 pikseļi) un (maksimālais platums: 1599 pikseļi) ( )

Šis kods nozīmē, ka stili, kas atrodas starp “( )”, darbosies ekrāniem, kuru minimālais platums ir 1440 pikseļi un maksimālais 1599 pikseļi.

Tas ir, tie vietnes elementu stili, kas jāpielāgo atkarībā no ekrāna izšķirtspējas, ir jāraksta atsevišķi katram iespējamajam ekrāna platumam.

Svarīgākās ekrāna izšķirtspējas adaptīvajam izkārtojumam

320 px - mobilās ierīces (portreta orientācija);
480 px - mobilās ierīces (ainavas orientācija);
600 pikseļi — mazi planšetdatori;
768 px — planšetdatori (portreta orientācija);
1024 pikseļi — planšetdatori (ainavas orientācija)/tīkldatori;
1280 pikseļi un vairāk — dators.

Tieši šīm izšķirtspējām jums ir jākoncentrējas un jāpievērš īpaša uzmanība, veidojot adaptīvos izkārtojumus. Šie ir visizplatītākie ekrāna izšķirtspējas veidi.

Bootstrap atsaucīgs dizains

Ir ļoti ērti izmantot bootstrap, lai izveidotu adaptīvu izkārtojumu. Ērtības ir tādas, ka visi stili bloku, pogu, tabulu utt. pielāgošanai. jau ir reģistrēti bootstpap. Jums tikai jāizdomā, kuru klasi kādam elementam piešķirt.

Lai sāktu, lejupielādējiet jaunāko bootstrap versiju un pievienojiet to savai vietnei. Lūdzu, ņemiet vērā, ka stilu un skriptu savienošanai ar WordPress ir savas īpatnības.

Bootstrap izkārtojums atšķiras ar to, ka bloka vai ekrāna platums ir sadalīts 12 vienādās daļās. Un, piešķirot blokam noteiktu klasi, jūs varat iestatīt bloka platumu, kas vienāds ar nepieciešamo daļu skaitu.

Piemēram, šis dizains ļaus jums piešķirt vienu platu bloku 8 daļas platam saturam un vienu šauru bloku 4 daļas platai sānjoslai:

Bloku platums tiks aprēķināts automātiski atkarībā no ekrāna platuma. Un, skatoties mobilajā ierīcē, šie bloki pārvietosies viens zem otra.

Varat arī pielāgot bloka attālumu no malas, atkal, līdz vajadzīgajam detaļu skaitam. Piemēram, šis dizains:

Tiks izveidots 10 daļu plats bloks ar 1 ekrāna daļas kreiso atkāpi.

Ja paskatās uz to, darbs ar bootstrap padara darbu ļoti ātru. Turklāt šie stili noteikti darbojas pareizi, un vietnē nebūs nekā greiza.

Nākotnē plānoju publicēt vairākas nodarbības par darbu ar bootsrap. Tāpēc iesaku šo brīdi nepalaist garām.

Vietnes pielāgojamības pārbaude

Taču rodas jautājums: kā pārbaudīt vietnes pielāgošanās spēju? Tagad esat uzrakstījis multivides vaicājumus CSS, pievienojis bootstrap un izmantojis nepieciešamās klases. Kā pārbaudīt, vai vietne pareizi pielāgojas visām ekrāna izšķirtspējām?

Ļoti precīzs un vissvarīgākais bezmaksas pakalpojums, kas ir pelnījis cieņu un pateicību no tīmekļa pārziņiem un maketētājiem, kuri nodarbojas ar adaptīvo vietņu izkārtojumu.

Nu, kā jums patīk raksts? Viss skaidrs? Ja nē, rakstiet komentāros, mēs to izdomāsim kopā.

Jā, lai izveidotu responsīvu vietnes dizainu, jums ir smagi jāstrādā. Taču šie centieni tiks atalgoti ar labvēlīgu attieksmi pret jūsu vietni no meklētājprogrammām un, pats galvenais, jūsu vietnes apmeklētājiem.

Adaptīvais vietnes izkārtojums ļauj tīmekļa lapām automātiski pielāgoties planšetdatoru un viedtālruņu ekrāniem. Mobilā interneta datplūsma ar katru gadu pieaug, un, lai efektīvi apstrādātu šo trafiku, ir jāpiedāvā lietotājiem responsīvas mājaslapas ar lietotājam draudzīgu saskarni.

Meklētājprogrammas izmanto vairākus kritērijus, lai novērtētu vietnes atsaucību, kad tā tiek skatīta mobilajās ierīcēs. Google cenšas vienkāršot interneta lietošanu viedtālruņu un planšetdatoru īpašniekiem, mobilo ierīču meklēšanas rezultātos atzīmējot mobilajām ierīcēm pielāgotas vietnes ar īpašu atzīmi mobilajām ierīcēm. Yandex ir arī algoritms, kas lietotājiem mobilajā meklēšanā dod priekšroku vietnēm ar mobilo/responsīvo versiju.

Lapas attēlojumu mobilajās ierīcēs varat pārbaudīt pakalpojumos un.

Rīsi. 1. Mobilās meklēšanas rezultāti no Yandex un Google ar piezīmi par vietnes draudzīgumu mobilajām ierīcēm. Kas ir adaptīvais izkārtojums?

Adaptīvais izkārtojums paredz, ka nav horizontālas ritjoslas un mērogojamu apgabalu, skatoties jebkurā ierīcē, lasāma teksta un lielu apgabalu elementiem, uz kuriem var noklikšķināt. Izmantojot multivides vaicājumus, varat kontrolēt bloku izkārtojumu un izvietojumu lapā, pārkārtojot veidni, lai tā pielāgotos dažādiem ierīces ekrāna izmēriem.

Pamatmetodes responsīvas vietnes izveidei ir sniegtas rakstā. Adaptīvam dizainam galvenā vietnes konteinera platums ir iestatīts %, un tas var būt vienāds ar 100% no pārlūkprogrammas loga platuma vai mazāks. Režģa kolonnu platums ir norādīts arī %. Adaptīvajā dizainā galvenā konteinera un režģa kolonnu platums tiek fiksēts, izmantojot px vērtības.

Šajā nodarbībā aplūkotā adaptīvā šķidruma izkārtojuma tehnika lieliski darbosies divu kolonnu veidnē, padarot vietni adaptīvu un ērtu skatīšanai mobilajās ierīcēs. Veidnē ir pieņemts atšķirīgs lapu galvenā satura izkārtojums; šajā nodarbībā tiks apspriests galvenās lapas izkārtojums.

Mājas lapas izkārtojums

Lapa sastāv no trim galvenajiem blokiem: galvenes (galvenes), galvenā satura un sānjoslas iesaiņojuma konteinera un kājenes (kājenes). Par dizaina pagrieziena punktiem pieņemsim 768 pikseļus un 480 pikseļus.

Pirmajā punktā mēs paslēpsim augšējo izvēlni un pārvietosim sānjoslu zem konteinera ar ziņām. Otrajā punktā mēs mainīsim galvenes elementu atrašanās vietu, atcelsim sociālo tīklu pogu pozicionēšanu ziņās un atcelsim lapas kājenes kolonnu ietīšanu.

Rīsi. 2. Adaptīvā izkārtojuma piemērs 1. Meta tagi un sadaļa

1) Pievienojiet sadaļai nepieciešamos failus - saiti uz izmantotajiem fontiem, jQuery bibliotēku, kā arī spraudni bez prefiksa (lai nerakstītu pārlūkprogrammas prefiksus rekvizītiem):

Adaptīvs vietnes izkārtojums

2. Lapas galvene

Lapas galvenē ievietosim šādus konteinera elementus:
logotips ;
poga, lai parādītu/paslēptu galveno izvēlni;
Galvenā izvēlne

;
vietnes meklēšanas forma.

L O G O

kopsavilkums

Rakstu sludinājumu iesaiņosim ar elementu:

Dizaina pavasaris

Krievu valoda ir ļoti bagāta ar vārdiem, kas attiecas uz gadalaikiem un ar tiem saistītajām dabas parādībām.

Sānu kolonnā mēs pievienosim kategoriju sarakstu, jaunākos ierakstus un biļetena abonēšanas veidlapu:

Kategorijas

Lapas kājenē ievietosim informāciju par autortiesībām, pogām sociālie tīkli un saite uz e-pasts:

Vispārīgi stili, atiestatīt pārlūkprogrammas stilus uz noklusējuma iestatījumiem:

*, *:after, *:before ( box-sizing: border-box; polsterējums: 0; margin: 0; pāreja: .5s easy-in-out; /* pievienot vienmērīgas pārejas visiem lapas elementiem */ ) ul ( saraksta stils: nav; ) a ( teksta noformējums: nav; kontūra: nav; ) img ( displejs: bloks; platums: 100%; ) h1, h2, h3, h4, h5, h6 ( fontu ģimene: Playfair Displejs"; fonta svars: normāls; burtu atstarpes: 1px; ) pamatteksts ( fontu saime: "Open Sans", arial, sans-serif; fonta izmērs: 14 pikseļi; līnijas augstums: 1; krāsa: #373737; background: #f7f7f7; ) /* pievienot plūsmas tīrīšanu visiem konteineriem, kuros ir ietīti pakārtotie elementi */ header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after ( saturs: ""; displejs: tabula; notīrīt: abi 0 15 pikseļi;)

Mēs sadalām vietnes kājeni trīs vienādās kolonnās:

Kājene ( polsterējums: 30 pikseļi 0; fons: #3C3D41; krāsa: balta; ) .footer-col ( platums: 33.3333333333%; pludiņš: pa kreisi; ) .footer-col a ( krāsa: balta; ) .footer-col:last- bērns ( text-align: right; ) .social-bar-wrap ( text-align: center; ) .social-bar-wrap a ( padding: 0 7px; font-size: 18px; )

jQuery kods, ko iepriekš pievienojām lapas marķējumam pirms aizvēršanas taga, ir atbildīgs par augšējās izvēlnes rādīšanu un paslēpšanu, kad tiek noklikšķināts uz pogas (izvēlnes augstums tiek pārslēgts no nulles uz vienādu ar tās saturu):

$(".nav-toggle").on("klikšķis", funkcija())( $("#izvēlne").toggleClass("aktīvs"); ));

Katru mēnesi kļūst arvien vairāk vietņu ar adaptīvu marķējumu, klienti papildus vairāku pārlūkprogrammu funkcionalitātei arvien vairāk pieprasa pielāgojamību, taču daudzi izstrādātāji nesteidzas apgūt jaunas metodes. Bet atsaucīgs dizains ir vienkāršs! Šajā rakstā ir sniegti 5 adaptīvās iezīmēšanas piemēri dažādi elementi tīmekļa lapas.

Video (pozīcija: relatīvā; polsterējums apakšā: 56,25%; augstums: 0; pārplūde: paslēpts; ) .video iframe, .video objekts, .video iegulšana ( pozīcija: absolūtā; augšā: 0; pa kreisi: 0; platums: 100% ; augums: 100%;)

Konteiners (platums: 800 pikseļi; maksimālais platums: 90%; )

Varat arī mērogot attēlu:
img (maksimālais platums: 100%; augstums: automātisks; )

Šis dizains darbosies IE 7 un IE 9, bet IE 8 mēs veicam šādu uzlaušanu:

@media \0screen ( img ( platums: auto; /*, piemēram, 8 */ ))

Min-width - pretstats maksimālajam platumam, ļauj iestatīt objekta minimālo platumu. Tālāk esošajā piemērā min-width mērogs teksta lauku:

Lai jūsu vietnes izkārtojums iPhone vai planšetdatorā izskatītos labi, tas ir jāpielāgo šīm ierīcēm un ir svarīgi to darīt efektīvi...

Adaptīvs vietnes izkārtojums (dažkārt saukts arī par mobilajām ierīcēm draudzīgu) — DETALIZĒTS un soli pa solim kā nodarbībā:

Lūdzu, ņemiet vērā: Yandex un Google ir savi rīki, ar kuriem varat pārbaudīt vietnes pielāgojamību. Yandex ir jauna versija Tīmekļa pārziņiem tas atrodas šādi: rīki - mobilo lapu pārbaude.

Ja vēlies uzzināt kā uztaisīt responsīvu mājas lapas dizainu, tad par to būs rakstīts zemāk un sīkāk piemēros, BET, ja nav iemaņu darbā ar css, būs grūtāk. Vai arī to var izdarīt jūsu programmētājs vai tīmekļa pārzinis.

Responsīvs mājas lapas dizains — ietver lapas loga platuma un kolonnu un sānjoslu platuma iestatīšanu %, adaptīvā — pikseļos.

Lūdzu, ņemiet vērā: ja jūsu vietnei ir populārs dzinējs, piemēram, WordPress, tad viņiem nav "galvassāpes" ar adaptīvu dizainu - tur viss tiek izdarīts ar pāris peles klikšķiem - spraudnis tiek vienkārši instalēts un aktivizēts, un tas arī ir. VISI). Piemēram, WP - es izmantoju WPtouch - tas ir ļoti labs, bet, ja jums ir pilnas slodzes programmētājs, tad labāk šo brīdi darīt individuāli.

Jums jāsaprot, ka būtībā ar adaptīvo izkārtojumu bieži tiek manipulēts ar: platums (elementa platums: max-width un min-width), pludiņš (ietīšana, tas tiek noņemts, loga platumam samazinoties), fonts. -izmērs (tiek mainīts burtu augstums).

1) Vispirms jums ir jāraksta īpaša metataga dažāda veida ierīcēm:

2) Adaptīvie lapas parametri (platums un augstums):

Konteiners (
platums: 800 pikseļi
maksimālais platums: 90%;
}

Šajā gadījumā tiek iestatīts fiksēts konteinera platums, taču tas nedrīkst būt lielāks par 90% no loga platuma, un tas ir ļoti ērti - tad vietne pati pielāgosies loga izmēram.

3) Css adaptīvais izkārtojums visas vietnes attēliem:

img (maksimālais platums: 100%;
augstums: auto;
}

Šeit mēs parādām, ka attēla izmērs: tā maksimālais platums nedrīkst būt lielāks par 100% no acs - tādā veidā attēls pats pielāgojas tālruņa vai cita sīkrīka izmēram. Šeit ir tāda vienkārša metode – adaptīvais attēla dizains.

4) Vietnes teksta adaptīvais izkārtojums: šajā gadījumā notiek manipulācijas ar fonta augstumu: fonta lielumu un citiem parametriem.

Break-word ( vārdu aplaušana: pārtraukuma vārds; )

Šis CSS ir paredzēts defisei, ja ir gari vārdi bez defises.

Fonta lielumā ir daudz kļūdu: Yandex patīk rakstīt - teksta izmērs ir pārāk mazs, lai to lasītu mobilajās ierīcēs - šim nolūkam mēs rīkojamies šādi:

pamatteksts (fonta lielums: 16 pikseļi) — tas ļaus izvairīties no šīs kļūdas, un p tagam un saitēm tas jāievieto atsevišķi. Šī kļūda rodas tieši tāpēc, ka pamattekstā ir fonta lielums: 12 vai 14 pikseļi! Un šāds ir spriedums:

5) 3 kolonnu dizaina vai 2 kolonnu izkārtojuma pielāgošana - tur nav nekā sarežģīta, ja viss tiek darīts divos - ak, tad parasti ir jāatceļ iesaiņojums, tas ir, iestatiet pludiņu uz None, un bloki iet uz leju.

6) Adaptive CSS video (no Habr):

Video (
pozīcija: relatīvs;
polsterējums apakšā: 56,25% ;
augstums: 0 ;
pārplūde: slēpta;
) .video iframe ,
.video objekts
.video embed (
pozīcija: absolūta;
augšā: 0 ;
pa kreisi: 0 ;
platums: 100% ;
augstums: 100% ;
}

Lai izveidotu adaptīvu dizainu, bieži tiek izmantoti multivides vaicājumi (tie nosaka noteikumus, pamatojoties uz ekrāna platumu - pamatojoties uz ekrāna izšķirtspēju).

Šeit ir multivides vaicājumu paraugs — kādu izšķirtspēju izmantot adaptīvajam dizainam:

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

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

/* Mazas ierīces, planšetdatori */
@media tikai ekrāns un (maksimālais platums: 768 pikseļi) (

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

/* Pielāgots, iPhone Retina */
@media tikai ekrāns un (maksimālais platums: 320 pikseļi) (
/**/
}

/*========== Mobilā pirmā metode ===========*/

/* Pielāgots, iPhone Retina */
@media tikai ekrāns un (min-platums: 320 pikseļi) (
/**/
}

/* Īpaši mazas ierīces, tālruņi */
@media tikai ekrāns un (min-platums: 480 pikseļi) (
/**/
}

/* Mazas ierīces, planšetdatori */
@media tikai ekrāns un (min-platums: 768 pikseļi) (
/**/
}

/* Vidējas ierīces, galddatori */
@media tikai ekrāns un (minimālais platums: 992 pikseļi) (
/**/
}

/* Lielas ierīces, platekrāni */
@media tikai ekrāns un (min-platums: 1200 pikseļi) (
/**/
}

Bet jūs varat arī izvairīties no multivides vaicājumiem, iestatot kolonnu un bloku platumu procentos.

Multivides vaicājumiem mēs sākam no augšas: viss, ko darījām, ir pieņemams maksimālajam platumam: 768 darbosies arī pie 480.

Piemēram, Yandex var parādīt to - Ir horizontāla ritināšana:

Jums ir kaut kas ar polsterējumu vai malu — atiestatiet tos uz nulli vecāku atlasītājiem (blokiem), un jūs būsiet laimīgs.

Un beigās Yandex Webmaster parāda šo:

Es arī to darīju 4 stundas, pirmā reize vienmēr ir grūta! Bet tad jūs to varat izdarīt tikai pāris stundās! Un mēs to nosūtām tīmekļa pārzinim atkārtotai pārbaudei, lai tas būtu ātrāks — tas ir svarīgi SEO.

Kopumā šodien daudzi izmanto gatavas veidnes - Bootstrap, un praktiski nav sāpju -