Tuesday, 15 September 2015

how to use bootstrap @media


first you can do this :

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
the value may wrong, please check http://getbootstrap.com/css/#grid

if you use SCSS or LESS, you can:

@media(max-width: $screen-xs-max){}
@media(min-width: $screen-sm-min){}  /* deprecated: @screen-tablet, or @screen-sm */
@media(min-width: $screen-md-min){}  /* deprecated: @screen-desktop, or @screen-md */
@media(min-width: $screen-lg-min){}  /* deprecated: @screen-lg-desktop, or @screen-lg */

or low code from boostrap doc:

@media (max-width: $screen-xs-max) { ... }
@media (min-width: $screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: $screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: $screen-lg-min) { ... }




No comments:

Post a comment