markdown css计算

Posted 2021-05-06

# 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   

``` css
.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

``` css
@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  
``` css
#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:

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

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