✅ Kā izveidot atsaucīgu izkārtojumu

Satura rādītājs

Prasības
Īpašības minwidth un maxwidth
Izmantojot Relatīvais polsterējums

A atsaucīgs izkārtojums ir kļuvis par normu tīmekļa dizainā, šāda veida lapas izkārtojums nozīmē, ka, ja loga, kurā tas ir, pēkšņi mainās izmērs, tas ir, no ļoti liela līdz ļoti mazam un otrādi, mūsu elementiem jābūt iespējai pārkārtoties, lai saglabātu pienācīga un funkcionāla lietotāja pieredze.

Tas vienmēr ir bijis pieejams ar noteikumiem CSSTomēr pēdējā šīs pašas ieviešanas laikā tika veikti labāki pasākumi, daļēji tāpēc, ka jau pastāv mūsdienu mobilā pasaule, kas ir viens no lielākajiem dizaina patērētājiem atsaucīgs.

Lai gan ir vairāki ietvari, piemēram Bootstrap vai Fonds kas pēc noklusējuma dod mums atsaucīgu izkārtojumu, mēs ne vienmēr varam būt atkarīgi no tiem, tāpēc ir ļoti noderīgi zināt, kā mēs varam izveidot šo īpašību izkārtojumu ar saviem līdzekļiem.

Prasības

1- Lai pabeigtu šo apmācību, mums ir jābūt pamatzināšanām HTML Y CSS, jo tie ir būtiski, lai saprastu apmācībā sniegtos piemērus.

2- No tehniskās puses mums ir nepieciešams vismaz tāds mūsdienīgs pārlūks kā Google Chrome, teksta redaktoru, lai rakstītu mūsu kodu, mēs varam izmantot Cildens teksts o Notepad ++ vai pat Windows piezīmju grāmatiņa vai Gedit operētājsistēmā Linux, ja jūtamies piedzīvojumu pilni.

3- Visbeidzot, mums ir nepieciešams interneta savienojums, lai lejupielādētu vienu vai divus attēlus, ja mēs vēlamies to ievietot savā kodā, kā mēs redzēsim vienā no parādītajiem piemēriem.

Īpašības minwidth un maxwidth

Tas, iespējams, ir pirmais aspekts, ar kuru mēs saskaramies, strādājot ar vidi atsaucīgs, jo daudzas reizes mēs koncentrējamies uz to, kad lapa kļūst mazāka, bet kā ar jaunajiem ekrāniem 4K? Tāpēc mēs nedrīkstam atstāt novārtā maksimālo izšķirtspēju, saskaņā ar kuru mūsu vietne izskatās pienācīga.

minimālais platums un maksimālais platumsĪpašības vai atribūti minimālais platums Y maksimālais platums CSS palīdz mums cīnīties pret šo problēmu, jo tie ļauj mums noteikt maksimālo rezervi, saskaņā ar kuru mēs vēlamies, lai mūsu dizains būtu atsaucīgs, jo, ja nē, tad galējības izmēros var maldināt mūs, it īpaši šajos brīžos, kad izšķirtspēja turpina pieaugt, bet vēl nav kļuvusi milzīga.

Nākamajā piemērā mēs parādīsim, kā mēs varam regulēt savu izkārtojums pateicoties minētajām īpašībām, šim nolūkam mēs izveidosim dokumentu HTML ar šādu saturu:

Adaptīva izkārtojuma piemērs 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at 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 transportlīdzekļi.

Mēs izveidojām trīs div elementus, kas darbojas kā kolonnas, tāpēc šajā gadījumā mēs sakām tā konteinera elementam raksts ka tā maksimālais platums būs 1200 pikseļiTātad, neatkarīgi no tā, cik liels ir ekrāns, dizains no turienes nekad neaugs, tad mēs izveidosim trīs klases - vienu katrai nodaļai un vienu - šādā veidā mēs piešķirsim minimālo platumu neatkarīgi no tā, cik lielā mērā ekrāns ir samazināts. vienmēr, lai saglabātu minimālās proporcijas, tas ir lieliski piemērots attēliem, kā mēs redzēsim piemēra ekrānuzņēmumā, un visbeidzot - klasei peldēt mēs arī piešķiram tam minimālo platumu. Apskatīsim, kā mūsu piemērs izskatās pārlūkprogrammā, ja mums ir liela izšķirtspēja:

PALIELINĀT

Tagad redzēsim, kā tas tiek palielināts, kad nedaudz samazinām pārlūkprogrammas logu:

PALIELINĀT

Visbeidzot, redzēsim rezultātu, kad logu izmērs būs līdzīgs mobilā izmēram:

Mēs redzējām, kā tika saglabātas minimālās un maksimālās proporcijas, bet vissvarīgākais ir tas, ka mūsu dizains tika pielāgots dažādām izšķirtspējām, ar kurām mēs to vizualizējām, un šādā veidā mēs varējām nodrošināt, ka lietotājs nezaudē lietojamību viņu pieredzē ar mūsu vietni.

Protams, tas nebūt nav kaut kas, kas būtu jāparāda ražošanā, bet tas dod mums priekšstatu par to, kur mums vajadzētu koncentrēt dažus centienus, kad strādājam pie reāla dizaina mūsu lietojumprogrammām un lapām, interesanti ir tas, ka kolonnas tika pielāgotas tā, lai mēs varētu redzēt, kā mēs pārejām no 3 kolonnu izkārtojuma uz vienas kolonnas izkārtojumu.

Izmantojot Relatīvais polsterējums

polsterējums Tas ir pasākums, kas ļauj mums saglabāt satura atstarpi pret konteinera malām, lai mēs noteiktu ierobežojumu, cik tālu tas aizies, to nevajadzētu jaukt ar rezervi, jo tas ir cits jēdziens.

Lieta ir tāda, ka polsterējums gandrīz nekad netiek ņemts vērā, veicot a izkārtojums būt atsaucīgs rezultātā rodas teksti un saturs, kas vēlāk paliek neestētiski, mainot izšķirtspēju, ar kādu tiek skatīts dizains.

Nākamajā kodā mēs darīsim a polsterējums kas darbojas salīdzinoši, tas ir, pielāgojot loga izmēru, mūsu polsterējums Tas mainīsies, lai saglabātu proporcijas un tādējādi padarītu saturu vienmēr tādu, kāds mēs to esam sakārtojuši, neskatoties uz to, ka izšķirtspējas maiņas dēļ ir mazāk vietas. Apskatīsim mūsu koda piemēru:

Relatīvais polsterējumsSaglabājiet proporcijas ar relatīvu polsterējumu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.

Kā redzam, mēs definējam īpašības polsterējums katrai klasei ar procentu vērtībām, nevis fiksētām vērtībām ar mērījumiem pikseļos, šādā veidā pārlūkprogrammas stila tulks beigās, kad redzēsim savu piemēru, sniegs mērījumu, kas atbilst mūsu ievietotajai vērtībai pārlūkprogrammā mēs iegūstam sekojošo:

PALIELINĀT

Tagad, ja mēs samazināsim loga izmēru, mēs redzēsim, kā tiek veikta korekcija, bet saglabājot proporcionālu attālumu no teksta līdz malām:

Pēc tam mēs pamanām, kā tiek saglabāts mūsu dizains un tiek novērsta deformācija, samazinot tās personas izšķirtspēju, kas to satur, tādējādi saglabājot mūsu lietotājam konsekventu pieredzi.

Lai gan ir uzlabotas koncepcijas, kuras mēs pieminēsim citās apmācībās, ar šiem pāris trikiem vai padomiem mēs varam pārvaldīt, lai mūsu vecajām vietnēm piešķirtu jaunu dzīvi, un vēl daudz vairāk nekā meklētājprogrammas, piemēram, Google Viņi lūdz mums mobilo versiju, lai mēs varētu sniegt mums rezultātus. Vissvarīgākais, lai sasniegtu lieliskus rezultātus, ir eksperimentēt un turpināt daudz praktizēt, lai šie risinājumi dabiski izietu no mūsu prāta un nebūtu vienmēr jāizmanto ceļveži.

Ar to mēs pabeidzam šo apmācību, jo redzam, ka rezultātu sasniegšanai mums nav nepieciešama nekāda sistēma atsaucīgs, un mums arī nav jāatstāj kombinācija HTML + CSSVienīgais ir tas, ka, ja mums ir jāveido mūsu pašu rīki, gandarījums par mūsu dizaina uzlabošanu ir liela atlīdzība.