Adaptirleme web dizaýny — bu, saýtyň smartfondan telewizora çenli islendik enjamda dogry görkezme çemeleşmesidir.
Käbir saýtlar kompýuterde-de, smartfonda-da birmeňzeş görünýär. Olary telefondan ulanmak kyn: şrift kiçi, düwmä basmak mümkin däl, mazmun ekranyň daşyna çykýar we mahabat tekstiň üstünden barýar.
Ulanyjynyň amatsyz saýtdan çykmagynyň öňüni almak üçin adaptirleme web dizaýny ulanylýar. Bu çemeleşme sahypalary dürli enjamlara uýgunlaşdyrýar: telefonlar, planşetler, netbuklar, noutbuklar we kompýuterler.
Adaptirleme dizaýny birnäçe sebäplere görä ýüze çykdy:
- ykjam telefonlaryň internet traffigi artdy;
- enjamlaryň köpüsi dürli ululykdaky dürli ölçegli ekranlar bilen peýda boldy;
- gözleg ulgamlary esasan ykjam enjamlara ünsi jemläp başlady.
Adaptirleme web dizaýny nähili işleýär?
Adaptirleme web dizaýn sahypasy döredilende birnäçe kesgitli giňlikdäki düzülişler döredilýär. Adaty toplum iň meşhur alty formatdan ybarat: 320, 480, 760, 960, 1200 we 1600 piksel.
Esasy maksat — enjamyň aýratynlyklaryny göz öňünde tutup, sahypany işlemeli.Mysal üçin, datçigiň ýa-da ekranyň ugrunyň bolmagy.
Adaptirlerme web dizaýnly saýtlar enjamyň görnüşini özbaşdak kesgitleýärler. Haçan-da bir adam baglanyşyga bassa, web sahypa enjamdan aýratynlyklaryny soraýar. Ondan soň, belli bir enjam üçin amatly tertibi saýlaýar we ulanyja görkezýär. Bu amala media sowaly diýilýär.
1.1 Web brauzerini ulanmak
1.1.1 Google Chrome brauzeri
– https://www.google.com/intl/tm/chrome/
1.1.2 Tekst redaktoryny ýa-da IDE ulgamyny ulanmak
– https://code.visualstudio.com/
1.1.3 Adaptirleme web dizaýnyny kesgitlemek
Bir bitewi çemeleşmede bar bolan üç usuly (flexible grid layout, flexible images/media, we media queries) birleşdirdi.
1.1.4 Brauzer goldaw derejelerini düzmek (HTML5, CSS3 ..)
– https://www.caniuse.com/#comparison
1.1.5 Ilkinji duýgur mysalymyz
1.1.6 Mediýa talaplarynyň sintaksisi
- CSS mediýa talaplary
1.1.7 Mediýa talaplarynyň sintaksisi
- CSS Mediýa talaplary – Netije
- Mediýa talaplarynyň sintaksisi;
- Dizaýnlary üýtgetmek üçin media talaplaryny ulanmak;
- Basgançakly stil tablisasy, ýokardaky ekwiwalent stilleri ýok edýär (ýokardaky stiller has anyk bolmadyk ýagdaýynda).
- Dizaýny üýtgetmek üçin mültimediýa talaplaryny ulanmak – Netije
- Mediýa talaplary bilen dürli CSS faýllaryna birikmek
- Meta belligini görkeziş penjiresi
- Mediýa soraglaryny ulanyp dürli CSS faýllaryna birikmek – Netije
1.1.8 Kesgitlenen piksel dizaýnyny suwuk proporsional makete öwürmek
- Ethan Markott, Fluid Grids atly 2009-njy ýylda çap edilen makalasynda ýazylan
(http://alistapart.com/article/FLUIDGRIDS)
- maksat / kontekst = netije
[Mysal çeşmesi (index.html)]
[Mysal çeşmesi (main.s)]
[Mysal çeşmesi (styles.css)]
[Mysal çeşmesiniň netijesi]
Bu makala esasan Serdar Orazdurdyýewiň 2018-nji ýylda ýazan «Web programmirlemesi» atly elektron kitabynyň «Adaptirleme web dizaýny» diýen mowzugynyň maglumatlary esasynda taýýarlandy.
