Hey guys
I don’t really understand the use of Media Querries. first of all, browsers have different kind of widths en people can adjust their widths random. So if you set a media Querries, you should actually make them for every possible width to have a responsive site?
Secondly, if you scaled your site based on the root or based on percentages, isn’t it already responsive enough? Than it should adapt to every possible width and height?
Thank you for your feedback,
Kr,
Yannick
There are a lot of design considerations when it comes to where your media query breakpoints should be. It’s not just the typical device size (like a 6" phone display vs a 4" display) but also how the design of your website breakdowns as it gets smaller.
For example, look a the forums page. The nav bar has the Codecademy logo top left, and then we have buttons floated right. If you come to the forums on your phone you’ll notice the logo is a smaller version with just a C, and most of the right side buttons are gone. It’s cleaner, easier to navigate. So that was a design choice they made. They could’ve used relative units like you suggested, to shrink the fonts and just keep it all the same. But it would look too busy and cluttered. And text would probably be uncomfortably small to read on a phone.
Other times websites want to offer access to different parts depending on device because it works differently. For example, the NYtimes websites shows large images and big headlines when on a computer screen, while the mobile version focuses on offering bite-size stories that easy to scroll through!
By choosing a range, like 200px to 756px, you are deciding what small screens will see. Then you can have another range from 756 to say 1400 for bigger resolutions. It depends on your logos, your menus, and what user experience you want to have.
Like I said, you’ll inevitable end up having trouble with logos being too small, fonts that you can’t read, buttons too thin to tap with a finger. Not to mention the waste of resources loading higher resolution images and other media to screens that can’t take advantage of it.