Responsive Web Design

This week's review is about responsive design, specifically the use of media breakpoints to make websites friendly to those viewing from mobile or other smaller screen resolutions. The two resources I found that cover this topic can be found within these links https://www.lambdatest.com/blog/how-to-use-css-breakpoints-for-responsive-design/ and https://kinsta.com/blog/responsive-web-design/


Summary:

When creating responsive web pages its important to use media breakpoints in the CSS. These help to create web pages that are easy to use and navigate no matter the screen resolution that the page is being viewed from. Common breakpoints include: 320px - 480px for mobile devices, 481 px - 768px for iPads and tablets, 769px - 1024px for small screens and laptops, 1025px - 1200px for desktops and large screens, and 1201px and greater for extra large screens and TVs. Other things you can do to achieve a responsive design are to use flexboxes and grids as opposed to floating content. Another tip to creating responsive design in web pages is to use relative units of measurements instead of pixels. This includes using percentages and EMs to define your content.