Flexbox is a great new tool we can fit into the web development toolkit, with Bootstrap 4 and other frameworks moving across to flexbox, it is becoming more important to start learning it.
Found this great cheat sheet which has interactive demos / explanations, there is plenty other resources out there, but I find this one easy to quickly get my bearings if the brain freezes!
Some useful bootstrap 3 media queries for both mobile first and non mobile first development styles, to make modifications to your front end simplier and follow the bootstrap 3 standard breakpoints.
Origional article can be found here.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/*========== 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) { } |