What kind of measure used at the time of building a site for width, height etc ...?

Navigation
1

What type of measure is used when building a site, such as width and height. If it's pixel, percentage, dot, centimeter?

    
asked by anonymous 29.01.2018 / 01:29

2 answers

2

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

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

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

Here are two articles that can help a lot in this discovery about the units!

link

link

I hope you have helped!

    
29.01.2018 / 11:23
2

About site widths , they are usually set by @Medias , but do not stick to magic numbers. I'll give you several examples from my point of view.

First, there is no official recommendation for screen sizes and BrackPoints by W3C, whether in PX, REM, EM or CM. (REM and EM measurements are based on the default font-size of the root-element, usually 16px, then 1REM = 16px, and the EM and REM-related here has more information about this: link )

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

Here is the official Media Queries documentation link

Mozilla also does not refer to BrackPoints as well as to Google. Follow official links to good practices.

There is also little consensus among the most famous FrameWorks such as Bootstrap , Materialize and Foundation . .. Each one determines a different width for Grid and screen widths.

  

Bootstrap3 breakpoints   

  

Bootstrap4breakpoints  

  

Materializebreakpoints  

  

Foundationbreakpoints  

Andtotopitoffhere'sagreatarticleonthemostpopularscreensizescurrentlyavailable,thedataisforDecember2017.Article: link

Desktop Screens

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

MobileScreens

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

TablerScreens

  • 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: link

  

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

    
29.01.2018 / 11:45
How does Length and Out of For in Javascript work? Change two-character position in javascript