Hal kahiji paling désainer mertimbangkeun nalika ngawangun kaca web maranéhanana nyaéta naon resolusi mendesain keur. Naon ieu bener jumlah ka anu mutuskeun kumaha lega design Anjeun kedah. Aya hal saperti deui sakumaha rubak ramatloka baku.
Naha Pertimbangkeun Resolusi
Dina 1995, standar 640x480 monitor resolusi éta pangbadagna tur monitor pangalusna aya. Ieu dimaksudkan yén web désainer fokus kana nyieun kaca nu katingali alus dina panyungsi wéb maksimal dina 12 inci nepi ka 14 inci monitor dina resolusi éta.
poé ieu, 640x480 resolusi nyusun kirang ti 1 persén paling lalulintas ramatloka. Jalma make komputer kalawan resolusi loba nu leuwih luhur kaasup 1366x768, 1600x900 na 5120x2880. Dina loba kasus, ngarancang pikeun karya layar resolusi 1366x768.
Kami di hiji titik dina sajarah desain web dimana urang teu kudu salempang teuing ngeunaan résolusi. Kalolobaan jalma kudu badag, monitor lega layar tur maranéhna teu ngamaksimalkeun jandela browser maranéhanana. Ku kituna lamun mutuskeun mendesain kaca nu teu leuwih ti 1366 piksel lega, kaca anjeun meureun bakal béda rupa paling jandéla browser malah dina monitor badag kalawan resolusi luhur.
browser Width
Samemeh indit kaluar pamikiran "oke, abdi gé ngadamel kaca kuring 1366 piksel lega," aya deui carita. Hiji masalah mindeng overlooked nalika mutuskeun lebar hiji kaca web geus sabaraha badag konsumén Anjeun tetep panyungsi maranéhanana. Husus, ulah aranjeunna ngamaksimalkeun panyungsi maranéhanana di hiji ukuran layar pinuh atawa ngalakukeun aranjeunna tetep leuwih leutik batan layar pinuh?
Dina hiji survéy informal of ko-pagawe anu sagala dipake laptop resolusi 1024x768 parusahaan-baku, dua diteundeun sakabeh aplikasi maranéhanana maksimal. sésana kapaksa jandéla béda-ukuran kabuka pikeun sagala rupa alesan. Ieu illustrates yén lamun nu ngarancang intranet ieu parusahaan di 1024 piksel lega, 85 persén pamaké bakal kudu gulung horisontal ningali sakabeh kaca.
Saatos Anjeun akun pikeun nasabah anu ngamaksimalkeun atawa ulah, pikir ngeunaan wates browser. Unggal web browser boga bar ngagugulung tur wates dina sisi nu ngaleutikan ruang nu sadia tina 800 nepi sabudeureun 740 piksel atanapi kirang dina 800x600 resolusi tur sabudeureun 980 piksel dina jandéla maksimal dina 1024x768 resolusi. Ieu disebut browser "Chrome" na eta tiasa nyandak jauh ti spasi usable keur desain halaman Anjeun.
Tetep atanapi Liquid Width Kaca
Lebar numeris sabenerna teu hijina hal nu peryogi pikir ngeunaan nalika ngarancang lebar ramatloka anjeun. Anjeun oge kudu mutuskeun lamun gé boga rubak dibereskeun atawa lebar cair . Dina basa sejen, anjeun bade ngeset lebar ka angka husus (dibereskeun) atawa perséntase (cair)?
Width tetep
Kaca lebar dibereskeun nu persis kawas aranjeunna disada. lebar geus dibereskeun di sababaraha husus sarta teu ngarobah euweuh urusan sabaraha badag atanapi leutik pangotektak. Ieu tiasa alus lamun kudu design Anjeun kasampak persis sarua euweuh urusan sabaraha lega atawa ngahususkeun panyungsi pamiarsa anjeun 'téh, tapi metoda ieu henteu tumut kana akun pamiarsa Anjeun. Jalma nu ngabogaan panjalajah narrower ti desain anjeun kudu ngagulung horisontal, jeung jalma nu ngabogaan panjalajah lega kudu jumlahna ageung spasi kosong dina layar.
Pikeun nyieun kaca rubak tetep, kantun nganggo nomer piksel husus keur lebaran di bagean kaca anjeun.
cairan Width
Kaca lebar cair (kadangkala disebut Kaca lebar fléksibel) rupa-rupa lebar gumantung kumaha lega jandéla browser is. Ieu ngidinan Anjeun pikeun ngarancang kaca nu leuwih difokuskeun konsumén Anjeun. Masalah jeung kaca rubak cair nyaeta aranjeunna tiasa sesah maca. Mun nu panjangna scan tina hiji garis téks téh leuwih panjang batan 10 ka 12 kecap atawa pondok ti 4 ka 5 kecap, bisa jadi sesah maca. Ieu ngandung harti yén pamiarsa kalawan jandela pangotektak ageung atanapi alit gaduh gangguan.
Pikeun nyieun kaca rubak fleksibel, kantun nganggo percentages atawa suweng pikeun lebaran di bagean kaca anjeun. Anjeun oge kedah familiarize diri jeung CSS max-lebar harta. sipat ieu ngidinan Anjeun pikeun nangtukeun rubak di percentages, tapi lajeng ngawatesan eta supados henteu meunang kitu badag yén urang moal bisa maca eta.
Sarta Winner dina Dupi: CSS Media queries
Solusi pangalusna poé ieu téh ngagunakeun queries média CSS jeung desain responsif kana nyieun kaca anu ngaluyukeun kana rubak browser nempoan eta. A desain web responsif ngagunakeun kandungan sarua pikeun nyieun hiji kaca web anu hade naha anjeun nempo eta di lega 5120 piksel atanapi 320 piksel lega. Kaca béda-ukuran kasampak béda, tapi aranjeunna ngandung eusi nu sami. Jeung pamundut media dina CSS3, unggal alat narima ngajawab pamundut kalayan ukuran na, jeung gaya lambar ngaluyukeun ka nu ukuranana tangtu.