7. Moslashuvchan dizayn

Responsive web design
QODIRBEK MAXAROV

Responsive web design
QODIRBEK MAXAROV

Responsive web design
QODIRBEK MAXAROV

Responsive vs Adaptive
QODIRBEK MAXAROV

Moslashuvchan dizayn
Moslashuvchan dizayn texnikasining 3ta asosiy komponenti:
Moslashuvchan setka (flexible grid, fluid layout)
Moslashuvchan rasmlar (flexible images)
CSS media so'rovlar (media queries)
*Qo'shimcha ravishda viewport meta elementi.
QODIRBEK MAXAROV

Viewport meta elementi
QODIRBEK MAXAROV

Developer tools
QODIRBEK MAXAROV
Qurilmani tanlash
Qurilmalarda ko'rinishni yoqish

Moslashuvchan setka (flexible grid, fluid layout)
CSS Grid layout
CSS Flex layout
Foizli qiymatlar
QODIRBEK MAXAROV

Moslashuvchan rasmlar (flexible images)
img {
max-width: 100%;
}
QODIRBEK MAXAROV

Media so'rovlar
@media [not | only] type [and (feature: value)]... {
/* styles for browsers that meet this criteria */
}
@media screen and (orientation: landscape) {
body {
background: skyblue;
}
}
@media screen and (orientation: portrait) {
body {
background: coral;
}
}
QODIRBEK MAXAROV

Media turlar
all – barcha turdagi qurilmalar uchun
print – printerlar uchun
screen – kompyuter, planshet, smartfon ekranlari uchun
speech – ekrandagi sahifani o'qiydigan (ovoz bilan) dasturlar uchun
QODIRBEK MAXAROV

Media xossalar
QODIRBEK MAXAROV
https://www.w3.org/TR/mediaqueries-4/

Ishlatish
HTMLda:
CSSda import orqali:
<br> @import url("/default-styles.css");<br> @import url("/wide-styles.css") screen and (min-width: 1024px);<br>
CSSda media so'rov orqali:
<br>@media screen and (orientation: landscape) {<br> body {<br> background: skyblue;<br> }<br>}<br>
QODIRBEK MAXAROV

To'xtash nuqtasini tanlash (breakpoint)
QODIRBEK MAXAROV

To'xtash nuqtasini tanlash (breakpoint)
QODIRBEK MAXAROV

Moslashuvchan dizayn
Muhim bo'lgan elementlar:
Kontent ierarxiyasi (Content hierarchy)
Maket (Layout)
Tipografiya (Typography)
Navigatsiya (Navigation)
Rasmlar (Images)
Maxsus content (jadvallar, formalar, interaktiv elementlar)
QODIRBEK MAXAROV

Moslashuvchan maket shablonlari (Responsive layout patterns)
QODIRBEK MAXAROV

Tipografiya
QODIRBEK MAXAROV

Tipografiya
Muhim bo'lgan xossalar:
shrift oilasi
shrift o'lchami
qator uzunligi
element chegarasi atrofidagi masofalar
Shuningdek, vw, vh o'lchov birliklaridan foydalanish mumkin.
QODIRBEK MAXAROV

Navigatsiya
QODIRBEK MAXAROV

Navigatsiya
QODIRBEK MAXAROV

Navigatsiya
QODIRBEK MAXAROV

Namunalar (kenglikka nisbatan)
body {
background-color: tan;
}
/* maksimal kenglik 992px bo'lganda */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* maksimal kenglik 600px bo'lganda */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
QODIRBEK MAXAROV

Namunalar (orientatsiya)
body {
background-color: lightgreen;
}
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
QODIRBEK MAXAROV

Namunalar (bloklar)
.column {
float: left;
width: 24%;
height: 100px;
background-color: aquamarine;
margin: 0.5%;
}
@media screen and (max-width: 992px) {
.column {
width: 49%;
}
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
QODIRBEK MAXAROV