/* BOOSTRAP MEDIA BREAKPOINTS *//* Small devices (landscape phones, 576px and up) */@media(min-width:576px){.selector{background-color:#f00;}}/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */@media(min-width:768px){}/* Large devices (desktops, 992px and up) */@media(min-width:992px){}/* Extra large devices (large desktops, 1200px and up) */@media(min-width:1200px){}
The @media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolutio
<!-- Don't forget to include this tag -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<!-- in your html head for media queries to work on all devices -->