Bootstrap 3: How to use media queries?
08.11.2015
What is a Media Query?
Media query is a CSS technique introduced in CSS3.
It uses the @media
rule to include a block of CSS properties only if a certain condition is true.
Min-Width: Refers to everything greater than or equal to the amount given.
Max-Width: Refers to everything less than or equal to the amount given.
Max-Width: Refers to everything less than or equal to the amount given.
Bootstrap 3: Media Query
/*================================================== = Bootstrap 3 Media Queries = ==================================================*/ /*========== Mobile First Method ==========*/ /* 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) { }
Bootstrap 2: Media Query
/*===================================================== = Bootstrap 2.3.2 Media Queries = =====================================================*/ @media only screen and (max-width : 1200px) { } @media only screen and (max-width : 979px) { } @media only screen and (max-width : 767px) { } @media only screen and (max-width : 480px) { } @media only screen and (max-width : 320px) { }