Responsive Design

Media Genesis is a website that states all the devices screen resolutions existing today. Obviously a web developer cannot create a different media quiery for every device. There are 2 approaches for setting breakpoints for responsive device:

• Based on device. A web developer can set media quieries for the most popular and widely using devices. The most common screen resolutions are: up to 600px for small devices, up to 992px for medium devices and 1200px and more for large devices.
• Based on content. In this case a new breakpoint is added each time the content of the page gets distorted.

The best option to choose necessary breakpoint is also depend on the device preference of the target audience. It is also important to check responsive design on real devices. Besides there are some sort of framework tools created exactly for building sites based on responsive design such as Bootstrap, Bulma, Foundation.

The websites describing media quieries and breakpoints are: Browser Stack and Coder Coder!