Pirmā lieta, ko lielākā daļa dizaineru apsver, veidojot savu tīmekļa lapu, ir kas izšķirtspēja projektēt. Tas, ko tas patiesībā nozīmē, ir izlemt, cik platam jābūt jūsu dizainam. Vairs nav tādas lietas kā standarta vietnes platums.
Kāpēc jāapsver izšķirtspēja
1995. gadā lielākie un labākie pieejamie monitori bija 640 pikseļi līdz 480 pikseļi. Tas nozīmēja, ka tīmekļa dizaineri koncentrējās uz to, lai tīmekļa pārlūkprogrammās labi izskatījušās lapas tiktu maksimāli palielinātas uz 12 līdz 14 collu monitora ar šo izšķirtspēju.
Mūsdienās izšķirtspēja 640 x 480 veido mazāk nekā 1 procentu no lielākās vietnes trafika. Cilvēki izmanto datorus ar daudz lielāku izšķirtspēju, tostarp 1366 x 768, 1600 x 900 un 5120 x 2880. Daudzos gadījumos darbojas dizains 1366 x 768 izšķirtspējas ekrānam.
Todya, lielākajai daļai cilvēku ir lieli platekrāna monitori, un viņi maksimāli nepārsniedz pārlūka logu. Tātad, ja jūs nolemjat noformēt lapu, kuras platums nepārsniedz 1366 pikseļus, iespējams, ka lielākā daļa pārlūka logu jūsu lapa izskatīsies lieliski pat lielos monitoros ar lielāku izšķirtspēju.
Pārlūka platums
Viena no bieži aizmirstajām problēmām, lemjot par tīmekļa lapas platumu, ir tā, cik lieli jūsu klienti saglabā pārlūkprogrammas. Konkrēti, vai viņi maksimāli palielina pārlūkprogrammas ar pilnekrāna izmēru vai arī saglabā tās mazākas par pilnekrāna režīmu?
Pēc tam, kad esat norēķinājies par klientiem, kuri palielina vai neveicina cenu, padomājiet par pārlūka robežām. Katrā tīmekļa pārlūkprogrammā tiek izmantota ritināšanas josla un tās malas robežojas ar pieejamo vietu no 800 līdz aptuveni 740 pikseļi vai mazāk ar 800 x 600 izšķirtspēju un aptuveni 980 pikseļi maksimizētos logos ar 1024 x 768 rezolūcijas. To sauc par pārlūku hroms un tas var atņemt jūsu lapas noformējumam izmantojamo vietu.
Fiksēta vai šķidra platuma lapas
Faktiskais skaitliskais platums nav vienīgais, par ko jādomā, izstrādājot vietnes platumu. Jums arī jāizlemj, vai jums ir fiksēts platums vai šķidruma platums. Citiem vārdiem sakot, vai jūs iestatīsit platumu uz noteiktu skaitli (fiksētu) vai procentuāli (šķidrumu)?
Fiksēts platums
Fiksēta platuma lapas ir tieši tādas, kādas tās izklausās. Platums ir fiksēts pie noteikta numura un nemainās neatkarīgi no tā, cik liels vai mazs ir pārlūks. Šī pieeja var būt laba, ja jums ir nepieciešams, lai jūsu dizains izskatās tieši tāds pats, neatkarīgi no tā, cik plašas vai šauras ir jūsu lasītāju pārlūkprogrammas, taču šī metode neņem vērā jūsu lasītājus. Cilvēkiem ar pārlūkprogrammām, kas ir šaurākas par jūsu dizainu, būs jāritina horizontāli, un cilvēkiem ar platām pārlūkprogrammām ekrānā būs daudz tukšas vietas.
Lai izveidotu fiksēta platuma lapas, izmantojiet noteiktus pikseļu numurus lapu sadalījuma platumam.
Šķidruma platums
Šķidruma platuma lapas (dažreiz tās sauc elastīga platuma lapas) platums atšķiras atkarībā no pārlūka loga platuma. Šī stratēģija nodrošina dizainu, kas vairāk koncentrējas uz klientiem. Šķidruma platuma lapu problēma ir tā, ka tās var būt grūti nolasāmas. Ja skenēšanas garums teksta rindiņas garums pārsniedz 10 līdz 12 vārdus vai īsāks par 4 līdz 5 vārdiem, to var būt grūti nolasīt. Tas nozīmē, ka lasītājiem ar lieliem vai maziem pārlūkprogrammas logiem ir problēmas.
Lai izveidotu elastīga platuma lapas, izmantojiet procentus vai ems lapu sadalījuma platumiem. Iepazīstieties ar CSS max platums īpašums. Šis rekvizīts ļauj iestatīt platumu procentos, bet pēc tam to ierobežot, lai tas nepalielinātos tik liels, ka cilvēki to nevarētu nolasīt.
CSS multivides vaicājumi
Labākais risinājums šajās dienās ir izmantot CSS multivides vaicājumus un atsaucīgu dizainu, lai izveidotu lapu, kas pielāgojas pārlūkprogrammas platumam, kas to skata. Reaģējošs tīmekļa dizains izmanto to pašu saturu, lai izveidotu tīmekļa lapu, kas darbojas neatkarīgi no tā, vai to skatāt 5120 pikseļu vai 320 pikseļu platumā. Dažāda lieluma lapas izskatās atšķirīgi, taču tajās ir viens un tas pats saturs. Izmantojot multivides vaicājumu CSS3, katra saņēmēja ierīce atbild uz vaicājumu ar tā lielumu, un stila lapa pielāgojas konkrētajam lielumam.