7. Moslashuvchan dizayn

Содержание

Слайд 2

Responsive web design

QODIRBEK MAXAROV

Responsive web design QODIRBEK MAXAROV

Слайд 3

Responsive web design

QODIRBEK MAXAROV

Responsive web design QODIRBEK MAXAROV

Слайд 4

Responsive web design

QODIRBEK MAXAROV

Responsive web design QODIRBEK MAXAROV

Слайд 5

Responsive vs Adaptive

QODIRBEK MAXAROV

Responsive vs Adaptive QODIRBEK MAXAROV

Слайд 6

Moslashuvchan dizayn

Moslashuvchan dizayn texnikasining 3ta asosiy komponenti:
Moslashuvchan setka (flexible grid, fluid layout)
Moslashuvchan

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

QODIRBEK MAXAROV

Слайд 7

Viewport meta elementi


QODIRBEK MAXAROV

Viewport meta elementi QODIRBEK MAXAROV

Слайд 8

Developer tools

QODIRBEK MAXAROV

Qurilmani tanlash

Qurilmalarda ko'rinishni yoqish

Developer tools QODIRBEK MAXAROV Qurilmani tanlash Qurilmalarda ko'rinishni yoqish

Слайд 9

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

QODIRBEK MAXAROV

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

Слайд 10

Moslashuvchan rasmlar (flexible images)

img {
    max-width: 100%;
}

QODIRBEK MAXAROV

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

Слайд 11

Media so'rovlar

@media [not | only] type [and (feature: value)]... {
/* styles

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

QODIRBEK MAXAROV

Слайд 12

Media turlar

all – barcha turdagi qurilmalar uchun
print – printerlar uchun
screen – kompyuter,

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

QODIRBEK MAXAROV

Слайд 13

Media xossalar

QODIRBEK MAXAROV

https://www.w3.org/TR/mediaqueries-4/

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

Слайд 14

Ishlatish

HTMLda:

  
  

CSSda import orqali:

CSSda media so'rov orqali:

QODIRBEK MAXAROV

Ishlatish HTMLda: CSSda import orqali: @import url("/default-styles.css"); @import url("/wide-styles.css") screen and (min-width:

Слайд 15

To'xtash nuqtasini tanlash (breakpoint)

QODIRBEK MAXAROV

To'xtash nuqtasini tanlash (breakpoint) QODIRBEK MAXAROV

Слайд 16

To'xtash nuqtasini tanlash (breakpoint)

QODIRBEK MAXAROV

To'xtash nuqtasini tanlash (breakpoint) QODIRBEK MAXAROV

Слайд 17

Moslashuvchan dizayn

Muhim bo'lgan elementlar:
Kontent ierarxiyasi (Content hierarchy)
Maket (Layout)
Tipografiya (Typography)
Navigatsiya (Navigation)
Rasmlar (Images)
Maxsus content

Moslashuvchan dizayn Muhim bo'lgan elementlar: Kontent ierarxiyasi (Content hierarchy) Maket (Layout) Tipografiya
(jadvallar, formalar, interaktiv elementlar)

QODIRBEK MAXAROV

Слайд 18

Moslashuvchan maket shablonlari (Responsive layout patterns)

QODIRBEK MAXAROV

Moslashuvchan maket shablonlari (Responsive layout patterns) QODIRBEK MAXAROV

Слайд 19

Tipografiya

QODIRBEK MAXAROV

Tipografiya QODIRBEK MAXAROV

Слайд 20

Tipografiya

Muhim bo'lgan xossalar:
shrift oilasi
shrift o'lchami
qator uzunligi
element chegarasi atrofidagi masofalar
Shuningdek, vw, vh o'lchov

Tipografiya Muhim bo'lgan xossalar: shrift oilasi shrift o'lchami qator uzunligi element chegarasi
birliklaridan foydalanish mumkin.

QODIRBEK MAXAROV

Слайд 21

Navigatsiya

QODIRBEK MAXAROV

Navigatsiya QODIRBEK MAXAROV

Слайд 22

Navigatsiya

QODIRBEK MAXAROV

Navigatsiya QODIRBEK MAXAROV

Слайд 23

Navigatsiya

QODIRBEK MAXAROV

Navigatsiya QODIRBEK MAXAROV

Слайд 24

Namunalar (kenglikka nisbatan)

body {   background-color: tan; } /* maksimal kenglik 992px bo'lganda */ @media screen

Namunalar (kenglikka nisbatan) body { background-color: tan; } /* maksimal kenglik 992px
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

Слайд 25

Namunalar (orientatsiya)

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

QODIRBEK MAXAROV

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

Слайд 26

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


  

  

  


  


Namunalar (bloklar) .column { float: left; width: 24%; height: 100px; background-color: aquamarine;

Слайд 27

Namunalar (menyu)

.topnav {
    overflow: hidden;
    background-color: #333;
}
.topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.topnav a:hover {
    background-color: green;
}

QODIRBEK MAXAROV

@media screen and (max-width: 600px) {
    .topnav a {
        float: none;
        width: 100%;
    }
}
...

  Home
  Link 1
  Link 2
  Link 3


Namunalar (menyu) .topnav { overflow: hidden; background-color: #333; } .topnav a {
Имя файла: 7.-Moslashuvchan-dizayn.pptx
Количество просмотров: 49
Количество скачиваний: 0