I love to work with Bootstrap.
Beneath you'll discover pleasantly
organized Media Queries for beginning with both of the Bootstrap versions. You
can utilize this as a beginning stage for your projects. It's essentially what
I utilize when making another site or webapp.
Min-Width: Refers to everything greater than or equivalent
to the sum given.
Max-Width: Refers to everything not exactly or equivalent to
the sum given.
/* Custom, iPhone
Retina */
@media only screen
and (min-width : 320px) {
}
/* Extra Small
Devices, Phones */
@media only screen
and (min-width : 480px) {
}
/* Small Devices,
Tablets */
@media only screen
and (min-width : 768px) {
}
/* Medium Devices,
Desktops */
@media only screen
and (min-width : 992px) {
}
/* Large Devices,
Wide Screens */
@media only screen
and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices,
Wide Screens */
@media only screen
and (max-width : 1200px) {
}
/* Medium Devices,
Desktops */
@media only screen
and (max-width : 992px) {
}
/* Small Devices,
Tablets */
@media only screen
and (max-width : 768px) {
}
/* Extra Small
Devices, Phones */
@media only screen
and (max-width : 480px) {
}
/* Custom, iPhone
Retina */
@media only screen
and (max-width : 320px) {
}
Responsive Utilities :
Much the same as Bootstrap 2, Bootstrap 3 gives responsive
utilities to hiding and showing components in view of the browser size. This
will likewise help us in characterizing our grid framework.
.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
Post a Comment