Best practices for measurements? (i.e. px, %, em, rem, vw, vh)
Best practices for measurements? (i.e. px, %, em, rem, vw, vh)
[ad_1]
What are the best practices or rules-of-thumb for WordPress measurements? For example, when is best to use whichever ones, and anything else to keep in mind?
You’re taking about measurements in CSS, not WordPress.
You can use to you preference but I use:
Containers: % with a minimum and maximum in PX
Font sizes: REM
Container padding: REM
Line Heights and paragraph/list spacing etc: EM
Then VH/VW for modules like hero sections which fill the viewport or are a percentage of the viewport.
Text: Use em or rem. They’re better for accessibility and responsive design. em is based on the parent element’s font size, rem on the root element’s.
Widths: Go for percentages. Makes your layout more flexible and responsive.
Full screen stuff: vh and vw are your friends. Great for hero sections.
Small, fixed sizes: px is okay here. Think borders or tiny icons. But avoid it for text!
Layout control: max width and min width are super helpful.
Complex measurements: calc() is awesome. Mix units like calc(100% – 20px).
Centering: auto margins are a lifesaver.
Different screens: Don’t forget media queries!
Heights: Avoid fixed heights if you can. They can mess up your layout on different screens.
Vertical spacing: Use padding instead of height. It’s more flexible.
Remember, there’s no one size fits all. Test on different devices to make sure everything looks good.
I have been looking for a “best practice” for this tol for a while and I always see different answers so I guess it depends on each person…
Have said that I recently noticed several sites using mostly rem, and the sites does adjust to any size. Used properly you are now not limited to a max screen size..
For example ser the size to 1360px and on wider screens site wull be small.. if set with % it may have way too much space between items on big screens but with rem it all adjust even if you test with really big screens or like seeing it at 10% and it all looks like any regular screen…
It is just a comment you can checkout and try yourself.. I am not saying is the best way just that I noticed that…
Sorry for my bad english, and if you find something good hope you share it! It is always good to learn and/or see other points of view…
You’re taking about measurements in CSS, not WordPress.
You can use to you preference but I use:
Containers: % with a minimum and maximum in PX
Font sizes: REM
Container padding: REM
Line Heights and paragraph/list spacing etc: EM
Then VH/VW for modules like hero sections which fill the viewport or are a percentage of the viewport.
Text: Use em or rem. They’re better for accessibility and responsive design. em is based on the parent element’s font size, rem on the root element’s.
Widths: Go for percentages. Makes your layout more flexible and responsive.
Full screen stuff: vh and vw are your friends. Great for hero sections.
Small, fixed sizes: px is okay here. Think borders or tiny icons. But avoid it for text!
Layout control: max width and min width are super helpful.
Complex measurements: calc() is awesome. Mix units like calc(100% – 20px).
Centering: auto margins are a lifesaver.
Different screens: Don’t forget media queries!
Heights: Avoid fixed heights if you can. They can mess up your layout on different screens.
Vertical spacing: Use padding instead of height. It’s more flexible.
Remember, there’s no one size fits all. Test on different devices to make sure everything looks good.
I have been looking for a “best practice” for this tol for a while and I always see different answers so I guess it depends on each person…
Have said that I recently noticed several sites using mostly rem, and the sites does adjust to any size. Used properly you are now not limited to a max screen size..
For example ser the size to 1360px and on wider screens site wull be small.. if set with % it may have way too much space between items on big screens but with rem it all adjust even if you test with really big screens or like seeing it at 10% and it all looks like any regular screen…
It is just a comment you can checkout and try yourself.. I am not saying is the best way just that I noticed that…
Sorry for my bad english, and if you find something good hope you share it! It is always good to learn and/or see other points of view…
I’m kinda surprised no one mentioned clamp for font-size
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
Relative for less headache.