Moslashuvchan web-dizaynlar: CSS media so’rovlar (davomi)

Web dasturlash

Oldingi postlarda yozilgan moslashuvchan web dizayn usullaridan foydalanib bir test o'tkazib kor'amiz.
G'oya shunday: kichik bir sahifa yaratamiz, orqa fonga qandaydir rasm joylashtiramiz. Va orqa fon rasmi har hil ekranda har hil rasm bo'ladi. Buning asosiy maqsadi shundaki, katta ekranlarda sahifa ochilganda fon rasmi katta bo'lishi kerak(hajm ham katta boladi) va kichik ekranlarda ochilganda fon kichik bo'ladi. Bu web sahifalarimizi samalari bo'lishiga yordam beradi. Shuningdek, sahifamizga 2 ta foreground rasm joylaymiz, ya'ni img tega orqali va bu rasmlar ham sahifamizga moslashishini ko'ramiz.

Demak, 3 ta rasm bor:
1. istanbul_little.jpg
2. istanbul_medium.jpg
3. istanbul_big.jpg

Html kod:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
	.....
</style>
</head>
<body>
	<h1>Istanbul</h1>	
	<div style='width:100%'>
			<img src='istanbul_1024_800.jpg'>
			<img src='istanbul_big.jpg'>
	</div>
	<div id='wrapper'>
		<p>Istanbul (yun. Konstantinopol) — Turkiyadagi eng katta shahar, Istanbul elining maʼmuriy markazi. Aholisi 6 536 862 kishi (2011-yil oʻrtalari). I. Marmardengizi va Bosfor boʻgʻozining past-baland sohillarida joylashgan. Boʻgʻoz shaharni ikkiga — Osiyo (kichikroq qismi) va Yevropa qismiga boʻlib turadi. Yevropa qismi Oltin Shox qoʻltigʻi sohillarida joylashgan. 1970—72 yillarda Bosfor boʻtoziga Istanbulning har ikkala qismini birlashtiradigan koʻprik qurilgan. Iqlimi subtropik oʻrta dengiz iqdimi, yanvarning oʻrtacha harorati 5,2 °C, avgustniki 23,6 °C, oʻrtacha yillik yogʻin 633 mm[3].</p>
		
		<h2>Tarixi</h2>
		<p>Istanbulga mil. av. 660 yilda Vizantii shahri sifatida asos solingan. 330-yildan Rim imperatori Konstantin nomi bilan atalgan[4][5]. 395-yilgacha Rim imperiyasi tarkibida, 395—1453 yillar Vizantiya poytaxti. 1453-yilda Istanbul turklar tasarrufiga oʻtgan va Usmonli turklar saltanatining poytaxtiga aylantirilgan; oʻsha vaqtdan shahar Istanbul deb atala boshladi. Usmonli turklar saltanatining kuchsizlanganidan foydalanib, 18-asr oxiridan Yevropa davlatlari shaharni va boʻgʻozlarnivbosib olishga harakat qilib keldilar. Turkiyaning birinchi jahon urushida harbiy qudrati kamaygach, Istanbulni Antanta davlatlarining qurolli kuchlari bosib oldi. 1923-yilda shahar bosqinchilardan ozod qilindi va oʻsha yilning oktyabrda Turkiya poytaxti Istanbuldan Anqaraga koʻchirildi.</p>
		<h2>Sanoati</h2>
		<p>Shahar qulay geografik oʻrinda joylashgan. Istanbul — mamlakatning muhim sanoat, savdo-moliya va madaniyat markazi. Mamlakat sanoatining 60% i Istanbulda joylashgan. Toʻqimachilik, oziq-ovqat, metallsozlik, yogʻochsozlik, elektrotexnika, kimyo, mashinasozlik, sement, koʻn poyabzal, tikuvchilik, harbiy va boshqa sanoat korxonalari, milliy va’chet el savdo firmalari, kompaniyalar, banklar, birjalar bor. Hunarmandchilik (yogʻoch, metall, teridan turli buyumlar yasaladi) rivojlangan. Turkiyadagi barcha savdo operatsiyalarining yarmi Istanbulga toʻgʻri keladi.</p>
		<h2>Transport yoʻllari</h2>
		<p>Istanbul — dengiz, quruqlik va havo yoʻllarining tuguni. Turkiyaning asosiy porti. Bu yerdan xalqaro kema yoʻllari oʻtgan. Temir yoʻl orqali Yevropadagi koʻpgina poytaxt shaharlar va mamlakatning ichki rayonlari bilan bogʻlangan. Bosfor boʻgʻozi orqali Istanbulning har ikki tomoniga yoʻlovchilar tashuvchi kemalar va yuk paromlari oʻtib turadi. Xalqaro aeroport bor.</p>
	</div>
</body>
</html>

CSS kod:

/* asosiy stil */
	body{
		line-height: 1.5;
		background-attachment:fixed;
	}
	p{font-family: Georgia,serif;}
	
	h2{font-family: Helvetica,Arial,sans-serif;border-bottom:1px solid #3e3c3c;}
	
	#wrapper{
		background:#fff;
		opacity: 0.5;
		padding:10px;
	}
	
	img{
		max-width: 47%;
		border:3px double #fff;
		border-radius: 5px;
	}
	
	/* agar brovzer ekrani kengligi 480px gacha bo'lsa */
	@media only screen and (max-width:480px){
		body{
			background-image: url(istanbul_little.jpg);
		}
		img{
			max-width:98%;
		}
	}
	
	/* agar qurilma ekrani kengligi */
	@media only screen and (max-device-width:480px){
		body{
			background-image: url(istanbul_little.jpg);
		}
	}
	
	/* agar ekran kengligi [480;800] oraliqda bo'lsa */
	@media only screen and (min-width: 480px) and (max-width: 800px){
		body{
			background-image: url(istanbul_1024_800.jpg);
		}
	}
	
	/* agar ekran kengligi 800 dan ortiq bo'lsa */
	@media only screen and (min-width: 800px){
		body{
			background-image: url(istanbul_big.jpg);
		}
		#wrapper{
			background-color:#000;
			opacity:0.7;
		}
		p{
			color: #fff;
		}
	}

Endi natijalarni ko'ramiz(demo):
Katta ekranda:

O'rtacha ekranda:

Kichik ekranida:

Demo

Yuqorida 3 xil ekrandan olingan natija berildi. Men bularni brovzerni o'lchamini o'zim o'zgartirib oldim. max-width va max-device-width farqini shu yerda tushuntirib o'taman. max-device-width qurilma ekranini kengligini olsa, max-width brovzerga nisbatan oladi. Shuning uchun agar max-width ni ishlatsak, brovzer kengligini o'zgartirganimizda ham natijani ko'rishimiz mumkin.

Qanday qilib sahifani har hil qurilmalarda tekshirish mumkin?
Moslashuvchan sahifa yaratish mobaynida har hil qurilmalarda sahifani tekshirib ko'rishimizga to'g'ri keladi. Lekin bir necha qurilmalarda tekshirish qiyin. Internetda mobile web sahifalarni tekshirish uchun ajoyib sayt mavjud(xuddi emulyator kabi): ProtoFluid. Bu saytda turli ekran o'lchamlari bor: iPad, iPhone va hokozo. Hatto orientatsiyasini ham o'zgartirish mumkin.

Quida yaratgan sahifamizni iPhone da ko'rinishi berilgan: