Media
Metro UI Components Library is designed for build mobile-first projects.
About
Metro UI is designed as a mobile-first system. We use min-width
property for build media queries.
Metro UI support seven
media breakpoints:
default
< 576pxfs
@media screen and (min-width: 0) {...}sm
@media screen and (min-width: 576px) {...}md
@media screen and (min-width: 768px) {...}lg
@media screen and (min-width: 992px) {...}xl
@media screen and (min-width: 1200px) {...}xxl
@media screen and (min-width: 1452px) {...}
Many classes has media synonyms. You can use them with media suffixes: -fs
, -sm
, -md
, -lg
, -xl
, -xxl
.
Default
Initially defined behavior for screens with a size smaller than 576px
. Then the media modifiers redefine the behavior for the desired screen size.
Example
<div class="row">
<div class="cell-md-4">cell-md-4</div>
<div class="cell-md-4">cell-md-4</div>
<div class="cell-md-4">cell-md-4</div>
</div>
In this example cells defined with width: 100%
for screens less then 768px
and width: 33.3%
for more.