{"id":3734,"date":"2014-11-17T10:38:13","date_gmt":"2014-11-17T12:38:13","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=3734"},"modified":"2014-11-17T10:38:13","modified_gmt":"2014-11-17T12:38:13","slug":"conheca-as-unidades-de-css-css-rem-vh-vw-vmin-vmax-ex-ch","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/conheca-as-unidades-de-css-css-rem-vh-vw-vmin-vmax-ex-ch\/","title":{"rendered":"Conhe\u00e7a as Unidades de CSS : css, rem, vh, vw, vmin, vmax, ex, ch"},"content":{"rendered":"

\u00c9 f\u00e1cil ficar preso quando se trabalha com t\u00e9cnicas CSS que conhecemos bem, mas isso nos coloca em desvantagem quando novos problemas vem \u00e0 tona. \u00c0 medida que a web continua a crescer, a procura por novas solu\u00e7\u00f5es segue o mesmo caminho. Portanto, web designers e desenvolvedores de front-end n\u00e3o t\u00eam escolha: \u00e9 preciso conhecer bem o conjunto de ferramentas e possibilidades dispon\u00edveis.<\/p>\n

Hoje iremos introduzir algumas ferramentas “especiais<\/em>” CSS que talvez voc\u00ea n\u00e3o conhe\u00e7a. Essas ferramentas s\u00e3o unidades de medida CSS, como o pixel<\/em> e “ems<\/em>“, por\u00e9m \u00e9 bem prov\u00e1vel que voc\u00ea nunca tenha ouvido falar delas antes. Abaixo voc\u00ea pode conferir essas m\u00e9tricas.<\/p>\n

A equipe da Turbosite<\/a>\u00a0compartilha esse artigo baseado no post do blog\u00a0Desenvolvimento para Web<\/a>.<\/p>\n

 <\/p>\n

rem<\/h2>\n

Come\u00e7ando com algo similar ao que a maioria j\u00e1 conhece, a unidade em<\/code> \u00e9 definida como o font-size<\/code> atual. Assim, por exemplo, se voc\u00ea definir um tamanho de fonte no elemento <body><\/code>, o valor de em de qualquer elemento-filho dentro de <body><\/code> ser\u00e1 igual \u00e0quele tamanho de fonte.<\/p>\n

\n
<body>\n    <div class=\"test\">Test<\/div>\n<\/body><\/pre>\n
body {\n    font-size: 14px;\n}\n\u00a0\ndiv {\n    font-size: 1.2em; \/\/ calculado como 14px * 1.2, ou 16.8px\n}<\/pre>\n
 <\/p>\n<\/div>\n
A div ter\u00e1 um font-size de 1.2em<\/code>, Isto \u00e9, 1,2 vezes o tamanho da fonte que herdou \u2014 neste caso, 14px<\/code>. O resultado \u00e9 16.8px<\/code>.<\/div>\n
Entretanto, o que acontece quando se tem um elemento com valor em<\/code> dentro de outro elemento com valor em<\/code>? No trecho a seguir, foi aplicado o mesmo CSS acima; cada div<\/code> herda a font-size<\/code> de seu elemento-pai, permitindo aumentar gradualmente os tamanhos de fonte.<\/p>\n
\n
<body>\n    <div>\n        Test <!-- 14 * 1.2 = 16.8px -->\n        <div>\n            Test <!-- 16.8 * 1.2 = 20.16px -->\n            <div>\n                Test <!-- 20.16 * 1.2 = 24.192px -->\n            <\/div>\n        <\/div>\n    <\/div>\n<\/body><\/pre>\n