Moslashuvchan web-dizaynlar: css media so’rovlar Reja

Moslashuvchan web-dizaynlar: CSS media so’rovlar
Reja:
1. Moslashuvchan web-dizaynlar haqida.
2. CSS dasturlash tilida ishlash.
2. CSS kodlash tizimi ishlash.

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:

media="screen" />
media="print" />
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:


media="screen and (max-device-width: 480px)"
href="main.css" />

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

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.