Eliminate Needless Media Queries
This mini site uses 2 media queries and those could actually be combined into one.
We eliminated the need for resizing fonts and adjusting margins and padding with media queries by using the Clamp Function.
Using the clamp function we can define 3 sizes for our text elements at the top of the style sheet and eliminate the need to resize them at set break points with media queries.
The code:
clamp(minimum , preferred , maximum)
We set a minimum size, a preferred size and a maximum size. The preferred value must fall somewhere between the minimum and maximum to work properly. The browser will use the preferred value when that condition is met.
IMPORTANT!! Spacing is important in your preferred algorithm
p {
font-size : clamp(1.125rem , 1.125rem + .25dvw , 1.375rem);
}
Translates to: clamp(18px , 18px + .0025 X viewport width , 22px)
dvw stands for dynamic viewport width. use it in place of vw. It's just more reliable.
For example, translating, 1dvw says take 1% (.01) of the viewport width .
Our minimum is set to 18 pixels and maximum to 22 pixels.
Using the formula 18px + .0025 X viewport width we calculate the font size at different viewing widths.
We start at mobile viewing width and work our way upward in viewport width.
- @320 viewing 18.80px in range
- @360 viewing 18.90px in range
- @428 viewing 19.05px in range
- @640 viewing 19.60px in range
- @768 viewing 19.92px in range
- @940 viewing 20.35px in range
- @1024 viewing 20.56px in range
- @1180 viewing 20.95px in range
- @1280 viewing 21.20px in range
- @1366 viewing 21.41px in range
- @1920 viewing 22.80px browser will use max
It might sound like it's all GREEK at this point, but I stress the need for learning to use the clamp function if you're serious about your web development endeavors.
No More Image Swapping
With the addition of new image file formats that are a fraction of the size of of pngs and jpgs the need for swapping smaller images for faster loading times is no longer necessary. See: Using Images
Top