Before CSS3, it was common that developers and designers uses different CSS files for different devices.
But with the responsive design become first priority in the design world, and surfing the web sites from different devices become the standard, CSS3 tackled the challenges of detecting the browser capabilities by using the media queries.

Media queries are css instructions that will help you target specific device or browser or size. They are expressions that result to true or false, and when it is true it will apply the style enclosed depend on the result.
We can use it in two different ways either inside css file surrounded by brackets like this:
@media (max-width: 600px) {
    .facet_sidebar {
        display: none;
    }
}
Or you can use it as a html attribute condition to apply the whole css stylesheet.
< !-- CSS media query on a link element -- >
<link href="example.css" media="(max-width: 800px)" rel="stylesheet"></link>
What you can query on can cover lots of device features.
This is the most common features we can query on.

ValueDescription
aspect-ratioThe ratio between the width and the height of the viewport
colorThe number of bits per color component for the output device
color-indexThe number of colors the device can display
device-aspect-ratioThe ratio between the width and the height of the device
device-heightThe height of the device, such as a computer screen
device-widthThe width of the device, such as a computer screen
gridWhether the device is a grid or bitmap
heightThe viewport height
max-aspect-ratioThe maximum ratio between the width and the height of the display area
max-colorThe maximum number of bits per color component for the output device
max-color-indexThe maximum number of colors the device can display
max-device-aspect-ratioThe maximum ratio between the width and the height of the device
max-device-heightThe maximum height of the device, such as a computer screen
max-device-widthThe maximum width of the device, such as a computer screen
max-heightThe maximum height of the display area, such as a browser window
max-monochromeThe maximum number of bits per "color" on a monochrome (greyscale) device
max-resolutionThe maximum resolution of the device, using dpi or dpcm
max-widthThe maximum width of the display area, such as a browser window
min-aspect-ratioThe minimum ratio between the width and the height of the display area
min-colorThe minimum number of bits per color component for the output device
min-color-indexThe minimum number of colors the device can display
min-device-aspect-ratioThe minimum ratio between the width and the height of the device
min-device-widthThe minimum width of the device, such as a computer screen
min-device-heightThe minimum height of the device, such as a computer screen
min-heightThe minimum height of the display area, such as a browser window
min-monochromeThe minimum number of bits per "color" on a monochrome (greyscale) device
min-resolutionThe minimum resolution of the device, using dpi or dpcm
min-widthThe minimum width of the display area, such as a browser window
monochromeThe number of bits per "color" on a monochrome (greyscale) device
orientationThe orientation of the viewport (landscape or portrait mode)
overflow-blockHow does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4)
overflow-inlineCan content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4)
resolutionThe resolution of the output device, using dpi or dpcm
scanThe scanning process of the output device
update-frequencyHow quickly can the output device modify the appearance of the content (added in Media Queries Level 4)
widthThe viewport width