Last active
April 2, 2018 15:56
-
-
Save gmocamilotd/eec464e38110ba3b46165e2719ec4297 to your computer and use it in GitHub Desktop.
calc, entre otros, css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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. | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment