Code icon

CSS - UNITS

Links


    // UNITS
    font-size: 12px; //Pixels: Fixed unit, depends on the screen resolution, doesn't change when zooming
    withd: 100%; //% Depends of parent container
    height: 100wh - 100ww;  //View height and width, depends on the screen size
    padding: 1.1em; //Based on the parent font size. They can multiply. Use for padding to escale with the size of the element
    border-radius: 2rem; // REM Root font size: 1= 100% of the size. Doesn't accumulate like em


    // UNITS
    Relativas:
    -em element:Usar para padding, border radius en botones así escala con el tamaño de la fuente
    -rem: Font size of the root element.
    -ex (X-height) Expresa el tamaño relatio a la letra x
    -px: relativo a la resolucion del monitor. 
    -ch: Relative to the width of 0
    -lh: line height of the element
    -vw: 1% screen width
    -vh: 1% screen height
    -vmin: 1% of the viewport's smaller dimension
    -vmax: 1% of the viewport's larger dimension

    Absolutas:
    mm, cm, Q
    in: inches: 1=2,54cm
    pt: puntos 1=1/72in
    pc: picas 1=12pt
    px: pixels