Брейкпоинт

Ширина экрана, на которой вёрстка перестраивается: например, 640 px. Ниже этой границы две колонки становятся одной. В CSS задаётся медиазапросом: @media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }.

Как это выглядит: .grid { grid-template-columns: repeat(2, 1fr); } @media (max-width: 640px) { .grid { grid-template-columns: 1fr; } } — на телефоне одна колонка

Не путать: Брейкпоинт — не «размер телефона»: это ширина окна, поэтому мобильный вид получает и узкая колонка браузера на компьютере. И это не уменьшение шрифта: уменьшать текст ради того, чтобы всё влезло, — не адаптивность, а способ сделать его нечитаемым. Не путать с точкой останова в отладчике — слово одно, смысл разный.

Откуда слово: От английского break point — «точка перелома, точка разрыва». Слово пришло из полиграфии и вёрстки газет: там так называли место, где вёрстка ломается на новую полосу. В вебе смысл перенесли: ширина, на которой раскладка ломается и собирается заново.

Где это проходят: урок 10.5 «Одна страница на телефоне и большом экране» · Интерфейсы и сайты с нуля

Весь словарь программиста — 135 слов с объяснениями, примерами и ссылками на уроки.