How Responsive Web Design Works
This article gives a brief summary of how responsive web design works. When a site is responsive, content adapts to suit different screen sizes. Media queries are key to responsive web design. A media query places a condition on whether certain styles have an effect or not. For instance, a media query could be used replace a regular navigation menu with a mobile one on screens below a certain size. The CSS code for a media query could look like this:
CSS style rules entered in place of the /* CSS style rules here */ text will only have an effect on devices that are 480px wide or less. They will not take effect on screens of 481px or wider. The vast majority of mobile devices have a portrait screen width that is less than 480px wide. That’s why the 480px breakpoint is often used to target mobile phones. More about breakpoints later.Displaying content according to screen size doesn’t always require media queries. It’s possible to create fluid components by defining width values in percentages. Combining these fluid components with a handful of media queries achieves great results. This is what you will learn how to do.
Why Your Site Doesn’t Look Good On Mobiles
Perhaps you think your site already looks fine on your phone. And it probably does. Smart phones arrived in a non-responsive world of websites that were designed with larger computer monitors in mind. They had to take measures to make themselves useful internet browsing devices. They couldn’t just wait for responsive web design to kick off. So the solution they settled on was to scale websites down.
Non-responsive sites tend to shrink down proportionally on a mobile device. You can still see everything; the main content and the sidebars, etc., it’s just smaller. But the mobile device has not made your site responsive by virtue of being able to display it.
It’s considered best practice to display websites on mobile devices with readable font-sizes; readable without requiring the user to zoom in. Doing this means adjusting the design completely. Not just shrinking the desktop version of the site.
Visit Excellence Code responsive website as a reference for different devices size.