Moslashuvchan web-dizaynlar: CSS media so’rovlar

CSS 2.1 chiqqanidan boshlab, “media type” lar orqali har hil qurilmalar uchun stil yozish osonlashdi. Agar “print style sheet” (sahifani printerdan chop qilish uchun berilgan holatdagi dizayn) yozgan bo’lsangiz, konseptsiyasi bilan tanish bo’lsangiz kerak:

Qachonki sahifa printerda chop qilinganda, print.css stili ishga tushadi. Masalan, saytda ba’zi qismlar qog’ozga chop qilinishi shart bo’lmasa, shu qismlarni o’chirib qo’yish mumkin:

#header, #nav, .noprint {display: none;}

Agar opennet.uz da biror maqolani ochib, printerga bersangiz ham farqini sezasiz.

CSS3 da CSS2.1 dagi hamma screen, print, handheld kabi media turlarini qo’llab quvvatlaydi va shuningdek ba’zi max-width, device-width, orientation va color kabi qo’shimcha imkoniyatlar ham qo’shilgan. CSS3 chiqqanidan so’ng chiqarilgan yangi iPad va Android kabi qurilmalarda muammosiz ishlaydi. Agar css3 ni qo’llab quvatlamaydigan eski brovzer bo’lsa, unda e’tiborsiz qoldiradi.

Quidagi misolga qarasak:

So’rov 2 ta komponentdan iborat:
1.Media Type (screen)
2.Media feature (max-device-width)

Agar sahifa ekranda ochilsa va ekran eni 480px dan ko’p bo’lmasa, u holda main.css stili yuklanadi. Endi bu misolni sahifada ishlatib ko’ramiz.
2 ta css fayl yaratamiz: main.css(oddiy ekranda ochilganda) va mobile.css(kichik ekranli qurilmalarda ochilganda)

main.css

/* Asosiy stillar, bular mobile css uchun ham bir hil bo'ladi */
html,body{}

h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}

/* Struktura elementlari */
#wrapper{
    width: 80%;
    margin: 0 auto;

    background: #fff;
    padding: 20px;
}

#content{
    width: 54%;
    float: left;
    margin-right: 3%;
}

#sidebar-left{
    width: 20%;
    float: left;
    margin-right: 3%;
}

#sidebar-right{
    width: 20%;
    float: left;
}

mobile.css

#wrapper{
    width: 90%;
    color: red;
}

#content{
    width: 100%;
}

#sidebar-left{
    width: 100%;
    clear: both;

    /* Yangi maket uchun qo'shimcha stillar */
    border-top: 1px solid #ccc;
    margin-top: 20px;
}

#sidebar-right{
    width: 100%;
    clear: both;

    /* Yangi maket uchun qo'shimcha stillar */
    border-top: 1px solid #ccc;
    margin-top: 20px;
}

index.html

    

        

            
Content
    

        Mundarija                    
                скрыть
            
            

    
    
                Content
    
    
    
                Left sidebar
    
    
    
                Right Sidebar
    
    

            
In a statement to the BBC a Sony spokesman said: "We are starting to sell out - very rapidly but [we] will continue to work with all parts of the supply chain including our partners at retail to get more, as and when we can."
            
In a statement to the BBC a Sony spokesman said: "We are starting to sell out - very rapidly but [we] will continue to work with all parts of the supply chain including our partners at retail to get more, as and when we can."
        
        

        
Left sidebar
            
The launches are seen as a fight for dominance in the key Christmas season says the BBC's technology correspondent Rory Cellan-Jones.
            
The launches are seen as a fight for dominance in the key Christmas season says the BBC's technology correspondent Rory Cellan-Jones.
        
        

        
Right Sidebar
            
The launches are seen as a fight for dominance in the key Christmas season says the BBC's technology correspondent Rory Cellan-Jones.
            
The launches are seen as a fight for dominance in the key Christmas season says the BBC's technology correspondent Rory Cellan-Jones.
        
    

Natijani ko’rsak:

Endi buni telefonda ochsak quidagi natijani olamiz:

Ko’rib turganingizdek, yozuv rangi ko’k va sahifa strukturasi o’zgargan.
Bundan tashqari yana orientation(landscape va portrait), device-width, min-device-width kabi yangi atributlarga ham ega. Ko’p media so’rovlar ham bitta qatorli stilga joylashtirilishi mumkin va bu samaraliroq usuldir.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

Ushbu htmlbook.ru saytida berilgan ma’lumotni ham o’qib chiqishingizni maslahat beraman.

2-variant (Tahrirlandi)

Index.html dan:

qatorni o’chirib, uning o’rniga @media dan foydalanamiz:
main.css ga quidagi kodni qo’shamiz

@media only screen and (max-width: 480px) {
	#wrapper{
	width: 90%;
	color: red;
}

#content{
	width: 100%;
}

#sidebar-left{
	width: 100%;
	clear: both;

	/* Yangi maket uchun qo'shimcha stillar */
	border-top: 1px solid #ccc;
	margin-top: 20px;
}

#sidebar-right{
	width: 100%;
	clear: both;

	/* Yangi maket uchun qo'shimcha stillar */
	border-top: 1px solid #ccc;
	margin-top: 20px;
}
}

Bu usulda, agar brovzerni o’lchamini o’zingiz kichiklashtirsangiz, sahifa dizaynini o’zgarishini ko’rasiz. Shuningdek, openne.uz saytini ham brovzer enini kichiklashtirilgan holatda ko’ring, yuqoridagi menyuni o’zgarishini ko’rasiz, va sahifa brovzer o’lchamiga moslashadi.