- Units of size can be relevant to the browser size. For example, when defining element sizes like width and height, to make them responsive, you don’t need to change the fixed values with media queries. Instead of manually changing the size depending on the browser size, you can simply use units like percentages or viewport height/width to have variable units instead.
- Element sizes should be larger on larger devices. If someone is looking at an article on a large screen, they are likely looking at the content from a greater distance. To help them avoid squinting to read the text, you can help by making default text greater on larger sizes to account for the likely use cases.
- Some content does not need to be available on all browser sizes. On desktop, large screen real estate means that there is a lot of space to work with to help accomplish large tasks. On mobile devices, smaller screens make it difficult and sometimes you can save yourself the headache of trying to fit a complex item in a small space by simply removing it from the mobile experience.
- Grid and flexbox make responsive web design easy. If you know the element you are building will eventually need to be responsive, it can help to wrap the element in a display: flexbox/grid element to later adjust. Elements that are displayed horizontally can be moved to display vertically to account for the browser size differences.
- While using flexbox and grid, you can use separate unique values to make child elements responsive. For example, while using grid, you can use fractional units (fr) to make columns or rows proportionally larger to the container. In flexbox, you can wrap child elements to apply the same values and make them responsive.
Thinking About Responsive Design
QU Design Blog 
Leave a comment