Адаптивність в m.css ver.1.2

Підлаштовування m.css під розміри екранів (адаптивність) має кілька Media Break Points:

large (.lg-* > 1280px),
medium (768px < .md-* < 1280px),
small (480px < .sm-* < 768px)
extra-small (.xs-* < 480px).

Спробуйте повільно змінювати ширину екрану, скажімо до 1400px, до 1024px, до 600px, до 420px

Ширина Вашого екрану:

Column 100% of width .w100 - this text also visible by class .lg-visible Column 80% of width .md-w80 - this text also visible by class .md-visible Column 75% of width .sm-w75 - this text also visible by class .sm-visible Column 100% of width .xs-w100 - this text also visible by class .xs-visible

Використовуйте консоль розробника щоб побачити як це зроблено.

Розглянемо далі кілька наборів класів для реалізації адаптивності в зв'язку з шириною екрану.

Великий розмір екрану .lg-* (шириною від 1280px і більше)

Видимий тільки на великих розмірах екрану	.lg-visible
Прихований на великих розмірах екрану	.lg-hidden

Середній розмір екрану .md-* (шириною від 768px до 1280px)

Видимий тільки на середніх розмірах екрану	.md-visible
Прихований на середніх розмірах екрану	.md-hidden
Ширина 100% на середніх розмірах екрану	.md-w100
Ширина 80% на середніх розмірах екрану	.md-w80
Ширина 75% на середніх розмірах екрану	.md-w75
Ширина 66.666% на середніх розмірах екрану	.md-w66
Ширина 50% на середніх розмірах екрану	.md-w50
Ширина 33.333% на середніх розмірах екрану	.md-w33
Ширина 25% на середніх розмірах екрану	.md-w25
Ширина 20% на середніх розмірах екрану	.md-w20
Ширина 16.666% на середніх розмірах екрану	.md-w16
Ширина 12.5% на середніх розмірах екрану	.md-w12
Ширина 10% на середніх розмірах екрану	.md-w10
Обтікання по лівому краю на середніх розмірах екрану	.md-float-left або .md-flt-l
Обтікання по правому краю на середніх розмірах екрану	.md-float-right або .md-flt-r
Вирівнювання тексту по лівому краю на середніх розмірах екрану	.md-text-left або .md-txt-l
Вирівнювання тексту по правому краю на середніх розмірах екрану	.md-text-right або .md-txt-r
Вирівнювання тексту по центру на середніх розмірах екрану	.md-text-center або .md-txt-c
Вирівнювання тексту по обом краям на середніх розмірах екрану	.md-text-justify або .md-txt-j

Малий розмір екрану .sm-* (шириною від 480px до 768px)

Видимий тільки на малих розмірах екрану	.sm-visible
Прихований на малих розмірах екрану	.sm-hidden
Ширина 100% на малих розмірах екрану	.sm-w100
Ширина 80% на малих розмірах екрану	.sm-w80
Ширина 75% на малих розмірах екрану	.sm-w75
Ширина 66.666% на малих розмірах екрану	.sm-w66
Ширина 50% на малих розмірах екрану	.sm-w50
Ширина 33.333% на малих розмірах екрану	.sm-w33
Ширина 25% на малих розмірах екрану	.sm-w25
Ширина 20% на малих розмірах екрану	.sm-w20
Ширина 16.666% на малих розмірах екрану	.sm-w16
Ширина 12.5% на малих розмірах екрану	.sm-w12
Ширина 10% на малих розмірах екрану	.sm-w10
Обтікання по лівому краю на малих розмірах екрану	.sm-float-left або .sm-flt-l
Обтікання по правому краю на малих розмірах екрану	.sm-float-right або .sm-flt-r
Вирівнювання тексту по лівому краю на малих розмірах екрану	.sm-text-left або .sm-txt-l
Вирівнювання тексту по правому краю на малих розмірах екрану	.sm-text-right або .sm-txt-r
Вирівнювання тексту по центру на малих розмірах екрану	.sm-text-center або .sm-txt-c
Вирівнювання тексту по обом краям на малих розмірах екрану	.sm-text-justify або .sm-txt-j

Дуже малий розмір екрану .xs-* (шириною до 480px)

Видимий тільки на дуже малих розмірах екрану	.xs-visible
Прихований на дуже малих розмірах екрану	.xs-hidden
Ширина 100% на дуже малих розмірах екрану	.xs-w100
Ширина 80% на дуже малих розмірах екрану	.xs-w80
Ширина 75% на дуже малих розмірах екрану	.xs-w75
Ширина 66.666% на дуже малих розмірах екрану	.xs-w66
Ширина 50% на дуже малих розмірах екрану	.xs-w50
Ширина 33.333% на дуже малих розмірах екрану	.xs-w33
Ширина 25% на дуже малих розмірах екрану	.xs-w25
Ширина 20% на дуже малих розмірах екрану	.xs-w20
Ширина 16.666% на дуже малих розмірах екрану	.xs-w16
Ширина 12.5% на дуже малих розмірах екрану	.xs-w12
Ширина 10% на дуже малих розмірах екрану	.xs-w10
Обтікання по лівому краю на дуже малих розмірах екрану	.xs-float-left або .xs-flt-l
Обтікання по правому краю на дуже малих розмірах екрану	.xs-float-right або .xs-flt-r
Вирівнювання тексту по лівому краю на дуже малих розмірах екрану	.xs-text-left або .xs-txt-l
Вирівнювання тексту по правому краю на дуже малих розмірах екрану	.xs-text-right або .xs-txt-r
Вирівнювання тексту по центру на дуже малих розмірах екрану	.xs-text-center або .xs-txt-c
Вирівнювання тексту по обом краям на дуже малих розмірах екрану	.xs-text-justify або .xs-txt-j

Використовуючи одночасно кілька класів можна змінювати кількість елементів в рядах в залежності від ширини екрану. Наприклад, мініатюри статей на даному сайті мають кілька класів:

class="w33 md-w33 sm-w50"

в наслідок чого на великих і середніх екранах вони стоять по 3шт. в ряд (їх ширина складає 33.333%) а на малих - вже по 2 (ширина 50%). На дуже малих екранах такі блоки автоматично стають завширшик 100% і тому немає сенсу вказувати додатковий клас xs-w100.

Висловлюйте свої запитання та коментарі в формі, котра під низом статті.

Адаптивність в m.css ver.1.2

Великий розмір екрану .lg-* (шириною від 1280px і більше)

Середній розмір екрану .md-* (шириною від 768px до 1280px)

Малий розмір екрану .sm-* (шириною від 480px до 768px)

Дуже малий розмір екрану .xs-* (шириною до 480px)

Коментарі користувачів