CSS Media queries for device sizes can be confusing and can quickly turn into a big mess. However, with the help of Bootstrap it can be simplified to only a few classes. When using Bootstrap in LESS the mixins available sometimes isn’t as simplified as it should be. Here, we will look at an example of how we can extend Bootstrap media queries with LESS.
Bootstrap break points
First, lets get the Bootstrap break points that will define the different devices.
| Devices | Sizes |
|---|---|
| Phones | <768px |
| Small devices Tablets | ≥768px |
| Medium devices Desktops | ≥992px |
| Large devices Desktops | ≥1200px |
It is important to note that these sizes are by no means representative of all devices. Some tablets are as big as small desktops, and there are large phones that can be the size of tablets.
How Bootstrap uses the breakpoints
As seen in the Bootstrap documentation below, this is how they use media queries to define their break points:
/* Extra small devices (phones, less than 768px)
No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
This means that if you want to have a custom rule for different devices, you can also use the media queries above and it should work seamlessly with Bootstrap. However, this can be hard to read and tedious on projects where you have a lot of rules for different devices.
Simplified Queries
When using the bootstrap grid system the classes available to you are nice and straightforward to use. The solution below is simple and incorporates the grid classes and the break points defined.
/* Bootstrap deprecated @screen-xs-min as of v3.2.0 so we will target everything below 767px for phones */
@bs3-xs: ~"only screen and (max-width:767px)"; /* For Phones*/
@bs3-sm: ~"only screen and (min-width:@{screen-sm-min})"; /* For Small devices Tablets*/
@bs3-md: ~"only screen and (min-width:@{screen-md-min})"; /* For Medium devices Desktops */
@bs3-lg: ~"only screen and (min-width:@{screen-lg-min})"; /* For Large devices Desktops */
Using this is pretty simple
.footer{
font-size: 50px;
@media @bs3-xs {
font-size: 20px;
}
@media @bs3-sm {
font-size: 30px;
}
@media @bs3-md {
font-size: 40px;
}
}
If two or more devices share the same rule you can concatenate like so:
.footer{
font-size: 50px;
@media @bs3-xs,@bs3-sm {
font-size: 30px;
}
@media @bs3-md {
font-size: 40px;
}
}
Go Further
Sometimes for designs that are just not right on different devices, you can go further and define all the devices you want and even their orientation.
For example, iPhones 4 – 6 plus their orientations.
@iphone-4-portrait: ~"only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait)";
@iphone-4-landscape: ~"only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)";
@iphone-5-portrait: ~"only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait)";
@iphone-5-landscape: ~"only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape)";
@iphone-6-portrait: ~"only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait)";
@iphone-6-landscape: ~"only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)";
@iphone-6p-portrait: ~"only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait)";
@iphone-6p-landscape: ~"only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape)";
For a more extensive list with a number of different devices view the css-tricks list. If you have a better and simpler solution please let us know, we’d be happy to hear from you!
