What are media queries?


Media queries are directly connected with responsive web design. They appeared relatively recent as a great alternative solution while adjusting our website to given devices. Thanks to media queries, web developers’ lives are way easier and adapting already existing website to responsiveness seem almost pleasure.


Using media queries makes it possible to for example load different styles and types, regardless of the browser, orientation of the screen, number of operated colours or DPI resolution. Generally, it is all about making the website more responsive and adapt it to any device that could be used to surf that webpage.


First and most basic rule to ease the implementation of media queries is to establish the website based on rectangular main elements. Such layout is perfect for web developers to manipulate their settings and sizes. We may prepare one, main CSS file in some standard resolution e.g. 960px and add minor rules to other, custom resolutions. In order to assure all needed sizes, it is good to prepare such coding for three different parameters:


  • more than 320 px devices
  • 700 – 1000 px devices
  • 1028 and more px devices


If you want to make it in CSS, all you have to do is implementing adequate rules into media query:

  • @media screen and (width: 700px) { /* css declarations */ }

These are the most basic information about media queries, which you should know and implement in order to obtain great responsiveness of your website. The only problem with media queries may turn out with the usage of the oldest browsers, which simply do not support them, but this is a very rare issue.