Responsive Website Review


Yellowstone National Park

https://www.nps.gov/yell/index.htm

A developer can choose breakpoints based on the most common pixel sizes for different types of devices. For this page alone, there were 78 media queries with a min-width of 768px, which is the standard breakpoint for tablets. The next most common breakpoint was at 992px, which is for laptops (https://kinsta.com/blog/responsive-web-design/).

However, this approach will not be responsive for every single device out there. For example, a breakpoint of 360px won't work on all mobile devices, because not all phones are the exact same width. An alternative method is to create content-based breakpoints, where a media query is made at any specific point where content starts to misalign (https://www.lambdatest.com/blog/how-to-use-css-breakpoints-for-responsive-design/). Within the dev tools, you can access the device toolbar. There you can see how your page looks on the most popular devices. This approach however uses the Responsive option, which allows you to see the page on any screen size that you choose.