CSS - Responsive

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin

1 - About

3 - Responsive Element

An element that defined the width:

Example:

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

4 - Breakpoint

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

List:

Code Name Description Size
xs extra small Bootstrap Default <576px
sm small Small devices (landscape phones) < 768px
md medium tablets <992px
lg large Desktop <1200px
xl extra-large large desktops >= 1200px
/* 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) { ... }
Advertising
web/css/responsive.txt ยท Last modified: 2019/03/20 21:46 by gerardnico