CSS – Responsive design details
This site: https://www.designersinsights.com/designer-resources/designing-responsive-website/
Recommends these breakpoints…
Using Hardware Pixels to Design a Responsive Website
When designing a responsive website, we suggest you use 3 different sizes: 1) For a regular desktop, use the width of 1200 pixels, 2) for an iPad the format is 768 x 1024 pixels and 3) for an iPhone 5 the format is 320 x 568 pixels. Why these 3 formats? Simple, because a 1920 x 1080 is the most common HD desktop size, the regular size iPad is a common tablet size and the iPhone 5 is the smallest size you should be designing for. But in fact, you are actually designing for 5 formats when you consider that a mobile device can be used either vertically or horizontally.
UNITS
– from: https://www.w3schools.com/cssref/css_units.asp
Absolute Lengths
– Avoid these as they lack adjustment with changing screen size
| Unit | Description |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
Relative Lengths
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
| ex | Relative to the x-height of the current font (rarely used) | |
| ch | Relative to width of the “0” (zero) | |
| rem | Relative to font-size of the root element | |
| vw | Relative to 1% of the width of the viewport* | |
| vh | Relative to 1% of the height of the viewport* | |
| vmin | Relative to 1% of viewport’s* smaller dimension | |
| vmax | Relative to 1% of viewport’s* larger dimension | |
| % | Relative to the parent element |
– Relative units (as listed above) are the most useful in responsive design. ‘rem’ in particular is popular as it is relative to the root font size. A popular approach is to set the font size for the ‘html’ tag to 62.5% (ie
html{ font-size:62.5%; }
) which changes the default of 16px to 10px and this simplifies any ratios where rem is to be used (ie font-size of 16px would be achieved by using:
font-size: 1.6rem;
.
Media Query Syntax
From: https://www.w3schools.com/css/css3_mediaqueries.asp
CSS-Code;
}
You can also have different stylesheets for different media:
href=”print.css“>