The structure of a responsive website also makes it easy for search engines to read. Without responsive design you may be accidentally duplicating content in a mobile and non-mobile website, which dilutes your content's rankings in the search engines and may even result in a ranking penalty.
Media queries detect the screen resolution and display different views based on browser resolution. The style sheet that was developed supports four different resolutions:
980 pixels and up for desktop and tablets
768 pixels for tablets in portrait mode
480 pixels for smartphones
320 pixels for smartphones