Bei dieser Form des Webdesigns ist es nötig, dass sich das jeweilige Layout je nach Größe des Bildschirms oder Displays ohne große Verzögerungen neu strukturiert. Besondere Bedeutung erlangen die Breakpoints auch im Zusammenhang mit der ‚Mobile first‘-Offensive und dem Einsatz von Smartphones und Tablets.
Eine Website sollte auf allen Geräten optimiert dargestellt sein, sei es auf alten HD-Monitoren oder auf Smartphones im Quer- und Hochformat – genau hier kommen die Breakpoints ins Spiel. Ein Beispiel für den Einsatz von Breakpoints ist die Website einer Zeitung. Ist die Site auf einem normalen Desktop zu sehen, findet der User das Menü bspw. in der Seitenleiste. Wenn er die Site jedoch auf seinem Smartphone ansteuert, wird es schon aufgrund der wesentlich kleineren Bildschirmgröße ein Platzproblem geben und die Navigation als Sandwich-Menü oben rechts oder oben links angezeigt.
Webentwickler berücksichtigen beim Einsatz der Breaks die gängigsten Bildschirmauflösungen, die von verschiedenen Geräten verwendet werden. An den Breakpoints reagiert die jeweilige Seite und bietet dem Nutzer das jeweils passende Layout für sein Device an. Die Punkte sind dabei Pixelwerte, die Webentwickler im CSS festlegen. Wenn eine responsive Website den Wert erreicht, erfolgt eine Transformation. Der Breakpoint ist also im wahrsten Sinne des Wortes eher ein Transformationspunkt als ein Haltepunkt. Moderne und innovative CSS-Frameworks wie Bulma haben mittlerweile Breakpoints integriert. Mit ihrer Hilfe kann sich ein Web-Developer an den verschiedenen Größen für Endgeräte orientieren.