“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

Relative size and absolute size

Common units of length in web design are PX and em. What’s the difference between them?

Px is the number of pixels. A few pixels is the length of a few pixels. It’s an absolute size.

For example, if WE create a div box model, we set the width, height, interior and exterior spacing, etc. We use px in all of these properties. What if I want to make the box twice as large? We’ll have to double the number of px attributes we use, with a few changes. One or two places are fine, but if there are a lot of places, it can be troublesome.

So what? With the relative size, EM is a relative size, it is only necessary to determine a reference value, and then other attributes are based on this reference value to calculate the size, need to modify, just need to change the reference value, other dimensions are proportional to the automatic modification.

Em refers to the size relative to font size, such as an element that has an attribute font size: 10px = 1em = 10px and 2em = 20px. If all the child elements in a container use em, then all you need to do is change the font size.

For example, to make a container 1.5 times bigger, just change font size: 10px to font size: 15px.

Judge color roughly by HSL value

HSL is a blend of hue, saturation and brightness.

  • The hue is the circle in the image above, in rainbow order, starting at 0º.
  • Saturation is the percentage of pure color mixed with gray. The value ranges from 0% to 100%, with 0% indicating total gray and 100% indicating purity without any gray.
  • Brightness ranges from 0% to 100% for dark to bright, 0% for all black, 50% for solid, and 100% for all white.

For example, HSL (203, 92%, 75%) has a 203º hue, right between cyan and blue. Saturation of 92% means a little gray is mixed in, which makes it less vivid than a solid color, and brightness of 75% means a little brighter than a solid color, which makes the color roughly light sky blue.