{"id":1618,"date":"2020-12-07T14:04:00","date_gmt":"2020-12-07T17:04:00","guid":{"rendered":"https:\/\/goodyearep.com.br\/?p=1618"},"modified":"2021-05-18T13:43:47","modified_gmt":"2021-05-18T16:43:47","slug":"como-deixar-o-site-responsivo-com-css","status":"publish","type":"post","link":"https:\/\/goodyearep.com.br\/como-deixar-o-site-responsivo-com-css\/","title":{"rendered":"Como Deixar o Site Responsivo com CSS"},"content":{"rendered":"\n

Como Deixar o Site Responsivo com CSS | Hoje, um site n\u00e3o deve ficar bem apenas em uma tela de desktop, mas tamb\u00e9m em tablets e smartphones. Um website \u00e9 responsivo se ele for capaz de se adaptar \u00e0 tela do cliente. Veja mais detalhes no Good Year EP<\/a>.<\/p>\n\n\n\n

Como Deixar o Site Responsivo com CSS<\/h2>\n\n\n\n
\"Deixando
Como Deixar o Site Responsivo com CSS<\/figcaption><\/figure><\/div>\n\n\n\n

Neste artigo, vou mostrar como fazer um website responder facilmente em tr\u00eas etapas f\u00e1ceis.<\/p>\n\n\n\n

1 – Layout<\/h3>\n\n\n\n

Quando se constr\u00f3i um site de internet com capacidade de resposta, ou quando se faz um site j\u00e1 existente, o primeiro elemento a ser analisado \u00e9 o layout.<\/p>\n\n\n\n

Quando construo sites responsivos, sempre come\u00e7o por criar um layout n\u00e3o-responsivo, fixado no tamanho padr\u00e3o. Quando estou satisfeito com a vers\u00e3o n\u00e3o-responsiva, eu adiciono consultas de m\u00eddia e pequenas altera\u00e7\u00f5es ao meu c\u00f3digo para tornar o c\u00f3digo responsivo. \u00c9 muito mais f\u00e1cil focar em uma tarefa de cada vez.<\/p>\n\n\n\n

Quando terminar seu site n\u00e3o-responsivo, a primeira coisa a fazer \u00e9 colar as seguintes linhas dentro das tags e em sua p\u00e1gina html. Isto ajustar\u00e1 a visualiza\u00e7\u00e3o em todas as telas a uma propor\u00e7\u00e3o 1\u00d71 e remover\u00e1 a funcionalidade padr\u00e3o dos iPhones e outros navegadores de smartphone que tornam os sites em visualiza\u00e7\u00e3o total e permitem aos usu\u00e1rios ampliar o layout.<\/p>\n\n\n\n

Agora \u00e9 hora de acrescentar algumas perguntas da m\u00eddia. De acordo com o site do W3C, uma consulta de m\u00eddia consiste em um tipo de m\u00eddia e zero ou mais express\u00f5es que verificam as condi\u00e7\u00f5es de determinadas caracter\u00edsticas da m\u00eddia. <\/p>\n\n\n\n

\"Site
Site Responsivo com CSS<\/figcaption><\/figure><\/div>\n\n\n\n

Ao utilizar consultas de m\u00eddia, as apresenta\u00e7\u00f5es podem ser adaptadas a uma gama espec\u00edfica de dispositivos de sa\u00edda sem alterar o conte\u00fado em si. Em outras palavras, as consultas de m\u00eddia permitem que seu site tenha boa apar\u00eancia em todos os tipos de displays, desde smartphones at\u00e9 telas grandes.<\/p>\n\n\n\n

As consultas de m\u00eddia dependem do layout de seu website, por isso \u00e9 meio dif\u00edcil para mim fornecer-lhe um trecho de c\u00f3digo pronto para uso.<\/p>\n\n\n\n

Como j\u00e1 disse, voc\u00ea provavelmente ter\u00e1 que adaptar este c\u00f3digo um pouco para atender \u00e0s necessidades espec\u00edficas de seu website. Cole-o no arquivo .css de seu site.<\/p>\n\n\n\n

2 – M\u00eddias<\/h3>\n\n\n\n

Um layout responsivo \u00e9 o primeiro passo para um site totalmente responsivo. Agora, vamos nos concentrar em um aspecto muito importante de um site moderno: as m\u00eddias, como v\u00eddeos ou imagens.<\/p>\n\n\n\n

O c\u00f3digo CSS garantir\u00e1 que suas imagens nunca ser\u00e3o maiores do que o cont\u00eainer pai. \u00c9 super simples e funciona para a maioria dos websites. Observe que a diretiva de largura m\u00e1xima n\u00e3o \u00e9 reconhecida por navegadores mais antigos, como o IE6. Para funcionar, este trecho de c\u00f3digo tem que ser inserido em sua folha de estilo CSS.<\/p>\n\n\n\n

3 – Tipografia<\/h3>\n\n\n\n

O \u00faltimo passo deste tutorial \u00e9 definitivamente importante, mas muitas vezes \u00e9 negligenciado pelos desenvolvedores quando se trata de websites responsivos: Tipografia.<\/p>\n\n\n\n

At\u00e9 agora, a maioria dos desenvolvedores (inclusive eu!) usava pixels para definir o tamanho das fontes. Embora os pixels estejam ok quando seu website tem uma largura fixa, um website responsivo deve ter uma fonte responsiva. De fato, um tamanho de fonte responsiva deve estar relacionado \u00e0 largura de seu contentor pai, para que possa se adaptar \u00e0 tela do cliente.<\/p>\n\n\n\n

A especifica\u00e7\u00e3o CSS3 incluiu uma nova unidade chamada rems. Eles funcionam de forma quase id\u00eantica \u00e0 unidade em, mas s\u00e3o relativos ao elemento html, o que os torna muito mais f\u00e1ceis de usar do que os rems.<\/p>\n\n\n\n

Agora que voc\u00ea sabe como deixar o site responsivo com css, deixe seu coment\u00e1rio e veja outros artigos de wordpress e programa\u00e7\u00e3o<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Como Deixar o Site Responsivo com CSS | Hoje, um site n\u00e3o deve ficar bem apenas em uma tela de desktop, mas tamb\u00e9m em tablets e smartphones. Um website \u00e9 responsivo se ele for capaz de se adaptar \u00e0 tela do cliente. Veja mais detalhes no Good Year EP. Como Deixar o Site Responsivo com […]<\/p>\n","protected":false},"author":2,"featured_media":1692,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"_links":{"self":[{"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/posts\/1618"}],"collection":[{"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/comments?post=1618"}],"version-history":[{"count":0,"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/posts\/1618\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/media\/1692"}],"wp:attachment":[{"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/media?parent=1618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/categories?post=1618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/tags?post=1618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}