What kind of measure used when building a site for width, height etc...?

Question

What kind of measure is used when building a site, type width and height. If it is pixel, percentage, point, centimeter ?

Answer 1

About the width of the sites, they are usually defined by the @Medias, But don’t stick to magic numbers. I’ll give you several examples from my point of view.

First, there is an official recommendation of screen sizes and "Brackpoints" W3C, either PX, REM, EM or CM. (REM and EM measurements are based on the standard font-size of the root-element, usually 16px, then 1REM = 16px, and the EM is relative to the REM. here is more information about this: https://www.w3.org/TR/css-values-3/#lengths )

• in element font size
• ex x-height of element source
• ch width of "0" (ZERO, U+0030) element source glyph
• rem font size of the root element
• vw 1% of the width of the viewport
• vh 1% of viewport height
• vmin 1% of smallest viewport size
• Vmax 1% of the largest size of the viewport

Here is the official documentation on Media Queries https://www.w3.org/TR/css3-mediaqueries/

Mozilla also does not make references to "Brackpoints" as well as Google. Follow official links with good practices.

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media
• https://developers.google.com/web/fundamentals/design-and-ux/responsive/

Nor is there much consensus Frameworks most famous as Bootstrap, Materialize and Foundation for example... Each determines a different width for the Grid and screen widths.

Bootstrap3 breakpoints

---

Bootstrap4 breakpoints

---

Materialize breakpoints

---

Foundation breakpoints

---

And to finish here is an excellent article about the most used screen sizes currently, the data are from December 2017. Article: https://www.hobo-web.co.uk/best-screen-size/

Telas Desktop

• 1366 768 - 29.25%
• 1920 1080 - 17.34%
• 1440 900 - 7.32%
• 1600 900 - 5.72%
• 1280 800 - 5.27%
• 1280 1024 - 4.51%

Telas Mobile

• 360 640 - 41.11%
• 375 667 - 9.58%
• 720 1280 - 5.16%
• 320 568 - 4.55%
• 414 736 - 3.79%
• 320 534 - 3.46%

Telas Tabler

• 768 1024 - 57.99%
• 1280 800 - 5.89%
• 600 1024 - 4.6%
• 601 962 - 3.02%
• 800 1280 - 2.94%
• 1024 600 - 2.36%

Source: http://gs.statcounter.com/screen-resolution-stats/tablet/worldwide

OBS: Always consider your target audience and user experience before you begin development!

Answer 2

It all depends on what your need is! The most common measurements are pixel, percentage, MS.

We use percentage when we want to develop an interface that will adapt in other resolutions, making the element to which the percentage has been added, flexible with the page size.

Pixel we use when we want something that is always this size, because regardless of the device size, the pixel is always the same size.

I leave below two articles that can help a lot in this discovery about the units!

https://tableless.com.br/unidade-pixels-em-rem/

https://www.w3.org/Style/Examples/007/units.pt_BR.html

I hope it helped!