CSS breakpoint là gì?

Điểm ngắt CSS (CSS breakpoint) là điểm mà tại đó nội dung của website phản hồi theo chiều rộng thiết bị (device width), cho phép bạn hiển thị bố cục (layout) tốt nhất có thể cho người dùng.

Điểm ngắt CSS (CSS breakpoint) còn được gọi là media query breakpoint vì chúng được sử dụng với media query.

Ví dụ với thiết bị kích thước lớn như máy tính ta sẽ hiện thị layout với hai cột nhưng với thiết bị có kích thước nhỏ ta sẽ hiện thị layout với một cột. Điểm mà tại đó ta thay đổi layout hai cột và một cột được gọi là điểm ngắt CSS (CSS breakpoint).

Có hai cách tiếp cận để thiết lập điểm ngắt CSS (CSS breakpoint):

• Điểm ngắt dựa trên thiết bị.
• Điểm ngắt dựa trên nội dung.

Dưới đây là một ví dụ về các điểm ngắt dành riêng cho thiết bị:

/* Portrait */

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: portrait) {

}

/* Landscape */

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: landscape) {

}

/* ----------- Google Pixel ----------- */

/* Portrait */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* Landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

}

Tùy chọn lý tưởng để quyết định điểm ngắt là dựa trên nội dung trang web của bạn. Phương pháp này cho phép bạn chỉ cần thêm các điểm ngắt mà nội dung của bạn cần điều chỉnh bố cục. Điều này sẽ làm cho media query của bạn đơn giản và dễ quản lý hơn rất nhiều. Điểm ngắt bên dưới có nghĩa là CSS sẽ áp dụng khi chiều rộng thiết bị từ 768px trở lên.

@media only screen (min-width: 768px){

...

}