Responsive Web Design, or RWD, is a cascading style sheet, CSS, declaration that converts layouts for different screen sizes. Responsive web design breakpoints are responses to media queries to change the layout once a browser is within a certain range.
These breakpoints are determined by the type of device accessing the website, but every responsive site has breakpoints for tablets and mobile devices. These devices are based on the iPhone and iPad, which have the largest market share. This works for most responsive websites, but sometimes more detail for layout changes must be provided. For example, landscape and portrait orientation require different breakpoints.
Responsive web design breakpoints can be customized to provide the best rendering for the active browser screen. Customized breakpoints mean that the website will appear the same regardless of whether it is being viewed on a computer or a mobile device. To achieve this, the device cannot be the determining factor. Instead, the widths of devices should be considered benchmarks. Place the emphasis on the page layout and then experiment with the browser width at which the layout integrity is compromised.
To create a custom breakpoint, follow the guidelines below.
1. Make sure to use the correct browser extensions, such as resize window for Chrome, so that as you shrink the browser, the current dimensions display in the right corner of the screen.
2. Test for widths between the programmed breakpoints to find inconsistencies in the displayed website. Using an extension like resize window requires more time looking at every pixel width to document where further breakpoints may be required.
3. Create a media query declaration in a call that supports flexible browser and device responses.