CSS - Responsive (Breakpoint)

About

responsiveness in CSS

Responsive Element

An element that defined the width:

• as percentage
• or fix with a max-width property in percentage generally equal or below 100%

Example:

percent {
    width: 100%;
}

fix_res {
   width: 350px;
   max-width: 100%
}

Breakpoint

Bootstrap use media queries to create breakpoints. They are called also toggle size for the navbar.

List:

/* Extra small devices (portrait phones, less than 576px)
   No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) { ... }

/* .... */

• In the other direction (the given screen size or smaller):

@media (max-width: 575px) { ... }

• targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

@media (min-width: 576px) and (max-width: 767px) { ... }

• span multiple breakpoint widths

@media (min-width: 768px) and (max-width: 1199px) { ... }