gmocamilotd
4/1/2018 - 5:15 PM

css calc

calc, entre otros, css

algunas medidas

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

uso del calc

1 en el uso de una imagen como fondo de una DIV que está indentado por el margin del BODY

.backpicturemail {
    background-image: url("../img/mail-banner.png");
    background-repeat: no-repeat;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

pero debido a que el contenido de BODY esta cercado a 1200px (en este ejemplo) y centrado
de manera que la imagen de fondo del div parece empezar en indentado y NO desde el borde de la pagina
asi usamos calc para cuando estams en pantallas mayores de ese ancho

@media screen and (min-width: 1205px) {
    .backintro1 {
        margin-left: -webkit-calc(-1 * (100vw - 1200px) / 2) !important;
        margin-left: -o-calc(-1 * (100vw - 1200px) / 2) !important;
        margin-left: -moz-calc(-1 * (100vw - 1200px) / 2) !important;
        margin-left: calc(-1 * (100vw - 1200px) / 2) !important;

    }
}

2 to use calc() with transform:translateX in my CSS.

otro uso

#myDiv {
    -webkit-transform: translateX(calc(100% - 50px));
    -moz-transform: translateX(calc(100% - 50px));
    transform: translateX(calc(100% - 50px));
}

3 Is it possible to calculate the Viewport Width (vw) without scrollbar?

One way to do this is with calc. As far as i know, 100% is the width including scrollbars. So if you do:

body {
  width: calc(100vw - (100vw - 100%));
}

You get the 100vw minus the width of the scrollbar.