Ի՞նչ պետք է նշվի CSS-ում այս բրեյքպոինտների…

Օգտագործվում է @media մեդիա հարցումը: Ներքևում նշվում են պայմանները, որոնք հիմնված են սարքի կամ դիտման տարածքի հատկանիշների վրա:

Հիմնական պարամետրերը:

width / height: Դիտման տարածքի լայնությունը/բարձրությունը:
min-width / min-height: Ամենափոքր լայնությունը/բարձրությունը:
max-width / max-height: Ամենաշատ լայնությունը/բարձրությունը:
orientation: Սարքի ուղղությունը (portrait կամ landscape):

Օգտագործման օրինակ՝ բրեյքպոինտների կարգավորումը:

/* Նախնական ոճերը փոքր էկրանների համար մինչև 768px */
body {
  font-size: 16px;
}

/* Բրեյքպոինտ 768px-ից մինչև 991px համար */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* Բրեյքպոինտ 992px-ից բարձր է */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Հաճախ օգտագործվող ռազմավարություններ՝

Mobile First: Նախապես սահմանվում են փոքր էկրանների համար, ապա ավելացվում են min-width մեդիա հարցումները լայն էկրանների համար:
Desktop First: Նախապես սահմանվում են մեծ էկրանների համար, ապա ավելացվում են max-width մեդիա հարցումները նեղ էկրանների համար:

Ընտրությունը կախված է նախագծից և նախընտրություններից:

Ստանդարտ բրեյքպոինտների արժեքներ՝

Կառավարում	Հասցե սահմանում	Մեդիա հարցում (Mobile First)	Մեդիա հարցում (Desktop First)
Փոքր հեռախոսներ	< 576px	Չկա (հիմնական ոճեր)	`@media (max-width: 575.98px)`
Հեռախոսներ	>= 576px	`@media (min-width: 576px)`	`@media (max-width: 767.98px)`
Տաբլետներ	>= 768px	`@media (min-width: 768px)`	`@media (max-width: 991.98px)`
Նոթբուքեր	>= 992px	`@media (min-width: 992px)`	`@media (max-width: 1199.98px)`
Դեսքտոպներ	>= 1200px	`@media (min-width: 1200px)`	`@media (max-width: 1399.98px)`
Մեծ դեսքտոպներ	>= 1400px	`@media (min-width: 1400px)`	Չկա (հիմնական ոճեր)

Կարևոր է ընտրել բրեյքպոինտները՝ ելնելով բովանդակությունից և ձևավորումից, ոչ թե սարքերի ստանդարտներից: Դրանք պետք է ակտիվացվեն այն վայրերում, որտեղ ձևավորումը սկսում է «կոտրվել»:

Ի՞նչ պետք է նշվի CSS-ում այս բրեյքպոինտների կարգավորումն ու կիրառումը համար: