/* A few media query to set some font sizes at different screen sizes. * This helps automate a bit of responsiveness. * The trick is to use the rem unit for size values, margin and padding. * Because rem is relative to the document font size * when we scale up or down the font size on the document * it will affect all properties using rem units for the values. */ /* I am using the em unit for breakpoints * The calculation is the following * screen size divided by browser base font size * As an example: a breakpoint at 980px * 980px / 16px = 61.25em */ /* 1200px / 16px = 75em */ @media (max-width: 75em) { html { font-size: 60%; } } /* 980px / 16px = 61.25em */ @media (max-width: 61.25em) { html { font-size: 58%; } } /* 460px / 16px = 28.75em */ @media (max-width: 28.75em) { html { font-size: 55%; } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter