44:["$","title",null,{"children":"Responsividade | Talita Burbulhan | Observable"}] 4c:T504,### Pratique: 1. **Experimente redimensionar a largura do seu navegador e observe o exemplo.** Como os elementos internos foram estilizados para ter largura relativa à viewport, todos os elementos se redimensionam junto com a janela. 2. Geralmente, não queremos que todos os itens se redimensionem o tempo todo, então vamos alterar o exemplo para que tenha largura externa responsiva, mas mantenha os elementos internos fixos: **Na regra `'a.marca{ }'`, altere o seguinte:** - `'width: 15vw;'` para `'width: 150px;'` – observe que agora o bloco roxo fica com largura fixa, mesmo que a janela do navegador diminua - `'font-size: 2vw;'` para `'font-size: 20px;'` – observe que a fonte fica fixa ao reduzir a janela - `'padding: 1vw 2vw;'` para `'padding: 10px 20px;'` – os espaçamentos dentro do bloco roxo ficam fixos **Na regra `'.usuario{ }'`, altere:** - `'width: 4vw;'` para `'width: 40px;'` – observe que agora o ícone fica com tamanho fixo, mesmo que a janela do navegador diminua Perceba que, como mantivemos a largura relativa de 100% para o bloco `'.barra'`, a barra continua se ajustando automaticamente quando você redimenssiona a janela do navegador, mas os elementos ficam com tamanho fixo, mantendo seus alinhamentos.4d:T502, 4e:[{"id":"348c6dd0f44b171b6ebb0757cb5f9b16a63ba3f11470381738a039981443a3e97c0528da03713d7a15a8f88770141914da9b201db0f12570350b55ac6d79a9ed","href":"https://static.observableusercontent.com/files/348c6dd0f44b171b6ebb0757cb5f9b16a63ba3f11470381738a039981443a3e97c0528da03713d7a15a8f88770141914da9b201db0f12570350b55ac6d79a9ed","name":"exemplo-2-grande.jpeg","type":"image/jpeg","lastModified":1648388694368.191,"size":13538}] 48:{"id":"eb947d7954527190","slug":"responsividade","title":"Responsividade","thumbnail":"ce9a356309afcdea49939e984e59526d80f45e33d3edd750e603d7ab9e3d9f72","access_level":"public","create_time":"$D2022-03-27T13:44:54.368Z","update_time":"$D2022-03-27T15:08:42.387Z","view_time":null,"first_public_time":"$D2022-03-27T15:09:03.733Z","has_unpublished_edits":null,"fork":{"id":"705088c6c89f2679","slug":"responsividade","title":"Responsividade","owner":{"id":"e49bedd1198f6f94","login":"845b73f2d04459f8","name":"carolx"}},"stars":0,"starred":false,"owner":{"type":"team","id":"367e9a5d8f016537","login":"talitaburbulhan","name":"Talita Burbulhan ","avatar_url":"https://avatars-next.observableusercontent.com/76308aa8e3dbafb03b7e5e7d56a419e6e0279a544f96e7a85c1ec2291bf4e23f","tier":"starter_2024","bio":"Jornalista. Aprendiz de Python.","followed_by_you":false,"follows_you":false},"version":378,"publish_version":378,"role":null,"authored":false,"authors":[{"type":"individual","id":"f6f27ad5dfd04760","login":"talitaburbulhan","name":"Talita Burbulhan ","avatar_url":"https://avatars-next.observableusercontent.com/76308aa8e3dbafb03b7e5e7d56a419e6e0279a544f96e7a85c1ec2291bf4e23f","tier":null,"bio":"Jornalista. Aprendiz de Python.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f6f27ad5dfd04760","login":"talitaburbulhan","name":"Talita Burbulhan ","avatar_url":"https://avatars-next.observableusercontent.com/76308aa8e3dbafb03b7e5e7d56a419e6e0279a544f96e7a85c1ec2291bf4e23f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Responsividade","cells":[{"id":0,"value":"# Responsividade\n\nAo criar uma página web, é importante considerar como ela ficará exibida em navegadores de computadores, notebooks, tablets e celulares. Vamos entender como deixar os blocos de conteúdo reponsivos usando as seguintes técnicas:\n\n- Unidades **relativas** x **absolutas**\n- **Media queries** (@media)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":220,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"# 1. Unidades relativas e absolutas\n\n**Unidades absolutas** (ou fixas) são aquelas que têm uma régua definida - o tamanho da unidade é universal. Por exemplo, 1cm é sempre a mesma medida, em qualquer situação. A medida absoluta mais usada em css é:\n\n- **pixels** (ex.: 100px)\n\n**Unidades relativas** são aquelas que dependem da dimensão de outro elemento ou estilo. Pode ser, por exemplo, as dimensões atuais do elemento pai, a medida definida para a fonte, ou até mesmo o tamanho da área do navegador. As medidas relativas mais comuns são:\n- **porcento** (ex.: 50%)\n- **viewport-width** e **viewport-height** (ex.: 100vw, 50vh)\n\n**Nota:** A unidade **fr** (fração) é usada apenas no contexto de definição de linhas e colunas no css grid\n\nVamos experimentar como usá-las para tornar o layout responsivo.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"

\n CULTURA\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":231,"value":"# 2. Media query\n\nEmbora um site já possa ficar bem responsivo somente com um uso adequado das unidades relativas e absolutas, em certos casos precisamos ajustar os conteúdos ao aparelho, orientação ou a tamanhos da tela específicos. Para isso, usamos as chamadas **media queries**\n\n\nAs media queries permitem que você estabeleça uma condição para um conjunto de regras de css, e somente quando esta condição for atingida, a regra será aplicada.\n\nPara criar uma regra ccondicionada por **media query**, acrescente uma linha (geralmente ao final do seu arquivo css) e digite a palavra-chave `@media`, seguida da condição que você deseja entre parêntesis. Por exemplo:\n\n```\n@media (max-width: 720px){\n // os estilos colocados aqui serão aplicados apenas\n // se a largura da janela for menor ou igual a 720px\n}\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":254,"value":"### EXEMPLO 2\nApós ajustar os tamanhos do Exemplo 1, quando diminuimos muito a janela do navegador até chegar a uma largura próxima de um celular, os elementos mantêm o tamanho, e acabam ficando um pouco grandes demais para uma tela de celular:\n\n![exemplo-2-grande.jpeg](${await FileAttachment(\"exemplo-2-grande.jpeg\").url()})\n\n\n\nO html a seguir reproduz a mesma estrutura do exemplo 1. Acrescentamos uma condicional `@media`, para que os estilos dentro dela sejam aplicados somente se a tela for menor que 680px. O bloco roxo e o do ícone ficarão um pouco menores. Veja o código a sseguir.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"\n

\n CULTURA\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":275,"value":"$4d","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"### Pratique:\n\n1. **Reduza a janela** do navegador até chegar em 680px (você pode precisar rolar a página pra manter o exemplo visível). Observe os tamanhos diminuirem quando a janela chega no limite definido.\n\n2. **No CSS acima:**\n - Crie uma nova condicional, desta vez para quando a largura do navegador for maior que 960px. Se para larguras menores que 680px usamos `max-width`, para larguras maiores que um certo número, usamos `min-width`. Assim:\n ```\n @media (min-width: 960px){\n /* sua regra de css vai aqui */\n }\n ```\n - **Dentro dessa condicional**, crie uma regra que altera a cor de fundo do elemento `'marca'` para a cor `#48d1cc`:\n ```\n .exemplo-2 a.marca{\n background-color: #48d1cc;\n }\n ```\n - Aumente e diminua a janela e obsserve o html do exemplo 2 modificar a cor de fundo quando a largura da janela é maior que 960px.\n \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null