Ի՞նչ է բրեյքպոինթը ռեսպոնսիվ դիզայնում։

Անհրաժեշտության դեպքում (breakpoint) հարմարեցված դիզայնում սարքի էկրանի լայնության շեմային արժեքն է, որի հասնել կամ անցնելիս էջի տարրերի CSS ոճերը փոխվում են:

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

• Բովանդակության օպտիմալ ցուցադրման ապահովում: Տարբեր էկրանի չափերում բլոկները կարող են ունենալ տարբեր չափեր, դիրքեր և մարգիններ:
• Էլեմենտների թաքցնում/ցուցադրում: Օրինակ, մոբայլ սարքերում կարող է թաքցվել կողային պանել, իսկ դեսկտոպներում՝ ցուցադրվել:
• Գրագրերի և պատկերների փոփոխություն: Ավելի լավ ընթերցելիության և կատարողականության համար:

CSS-ում media queries-ների միջոցով սահմանվում են breakpoint-ները:

/* Դյուրանցումային (առաջին մոբայլ) ոճեր */
body {
  font-size: 16px;
}

/* 768px-ից բարձր էկրանների համար ոճեր */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
  .sidebar {
    display: block; /* Ցուցադրել կողային պանել */
  }
}

/* 1200px-ից բարձր էկրանների համար ոճեր */
@media screen and (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

Տիպիկ breakpoint-ները հիմնված են ստանդարտ սարքերի չափերի վրա, բայց կարող են հարմարեցվել կոնկրետ դիզայնին համապատասխան:

Էկրանային չափը	Տիպիկ օգտագործում
Աշխատում է մինչև 576px	Շատ փոքր (օրինակ՝ հին սմարթֆոններ ուղղահայաց ռեժիմում)
576px - 768px	Փոքր (սմարթֆոններ հորիզոնական ռեժիմում, փոքր պլանշետներ)
768px - 992px	Միջին (պլանշետներ ուղղահայաց ռեժիմում, նոութբուքեր)
992px - 1200px	Մեծ (նոութբուքեր, դեսկտոպներ)
Ավելին 1200px	Շատ մեծ (մեծ մոնիտորներ)

Անհրաժեշտ է նախագծել "mobile-first" մոտեցմամբ՝ սկսելով ամենափոքր breakpoint-ներից և ավելացնելով ոճեր մեծ էկրանների համար, ինչը հեշտացնում է ոճերի վերագրումը։