Desde que eu comecei a trabalhar com Web Design<\/strong>, sonho com essa possibilidade. S\u00f3 quem precisou recortar e estruturar um PSD com 1200px de largura em um monitor com a resolu\u00e7\u00e3o de 800×600 sabe o quanto \u00e9 frustrante.<\/p>\n\n\n\n Al\u00e9m disso, aquela barra horizontal no navegador \u00e9 detest\u00e1vel em qualquer situa\u00e7\u00e3o. A chegada do Web Design Responsivo<\/a> <\/strong>foi, sem d\u00favida, o melhor upgrade para os tempos de hoje e eu sou muito grato por n\u00e3o existir mais a barra horizontal.<\/p>\n\n\n\n S\u00f3 que ainda hoje, em pleno 2021, alguns sites me surpreendem com a barra horizontal, deixando metade do site “para fora”. Por esse motivo, acredito que esse post ainda \u00e9 relevante, principalmente para quem est\u00e1 come\u00e7ando a se aventurar no CSS<\/strong>.<\/p>\n\n\n\n Agora vamos ao que interessa…<\/p>\n\n\n\n Sabe aqueles sites que, quando voc\u00ea vai mudando a largura da janela, voc\u00ea percebe o conte\u00fado se adaptando? Ent\u00e3o, isso \u00e9 poss\u00edvel gra\u00e7as ao @media<\/strong>. Que serve para dizer ao navegador que as propriedades de determinada class<\/strong> ser\u00e3o substitu\u00eddas de acordo com a largura da p\u00e1gina. Por exemplo:<\/p>\n\n\n\n A gente acabou de dizer para o navegador que quando a largura do dispositivo for menor que 480px, a class<\/strong> “content” mudar\u00e1 a largura de “910px” para “100%”.<\/p>\n\n\n\n Simples assim. Voc\u00ea pode alterar quantas propriedades quiser e quantas classes<\/strong> quiser dentro do mesmo @media<\/strong>.<\/p>\n\n\n\n Mas n\u00e3o esque\u00e7a de colocar a tag viewport<\/strong>, se n\u00e3o, quando voc\u00ea abrir o seu site em um dispositivo mobile<\/strong>, n\u00e3o vai funcionar o @media<\/strong>.<\/p>\n\n\n\n Resumindo, \u00e9 isso. Se voc\u00ea quiser saber mais detalhes sobre o funcionamento do @media<\/strong>, leia o post “Como usar o media query no CSS?<\/a><\/a><\/a><\/strong>“.<\/p>\n\n\n\n Se funcionou, n\u00e3o esque\u00e7a de comentar para ajudar outras pessoas que tiverem a mesma d\u00favida.<\/p>\n","protected":false},"excerpt":{"rendered":" Hoje vou te mostrar, de forma bem simples, como deixar o site responsivo. Esse post \u00e9 focado em quem j\u00e1 entende um pouco de CSS e quer saber como deixar o site responsivo. Se voc\u00ea n\u00e3o sabe nada sobre CSS, comece pelo post CSS para iniciantes: Estruturando uma p\u00e1gina. Desde que eu comecei a trabalhar […]<\/p>\n","protected":false},"author":1,"featured_media":550,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[20,19,26],"tags":[15,14,25],"class_list":["post-47","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-desenvolvimento-web","category-html-desenvolvimento-web","category-responsivo","tag-css","tag-html","tag-responsivo"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t![\"Imagem](\"https:\/\/fariart.com.br\/blog\/wp-content\/uploads\/2021\/06\/como-deixar-o-site-responsivo-1-1024x535.jpg\" "\\"Como")
Como deixar o site responsivo?<\/h2>\n\n\n\n
.content {width:910px;}\n\n@media (max-width: 480px) {\n\n.content {width:100%;}\n\n}<\/code><\/pre><\/div>\n<\/div><\/div>\n\n\n\n<meta name="viewport" content="width=device-width, initial-scale=1.0"><\/code><\/pre><\/div>\n\n\n\n