{"id":3808,"date":"2017-07-06T10:07:33","date_gmt":"2017-07-06T13:07:33","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=3808"},"modified":"2017-07-06T10:07:33","modified_gmt":"2017-07-06T13:07:33","slug":"layout-fluido-ou-responsivo","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/layout-fluido-ou-responsivo\/","title":{"rendered":"Layout Flu\u00eddo ou Responsivo"},"content":{"rendered":"

Muitas pessoas confundem os layout flu\u00eddos com os responsivos, pensam que tudo que \u00e9 responsivo apenas estica e diminui, mas n\u00e3o \u00e9 bem assim.\u00a0Layouts flu\u00eddos s\u00e3o bem diferentes de responsivos, pois o Flu\u00eddo<\/strong> (como o nome diz) flui com o tamanho da tela do usu\u00e1rio, enquanto o Responsivo<\/strong> responde ao tamanho.<\/p>\n

A equipe da Turbosite reuniu dois artigo para explicar melhor essa diferen\u00e7a. Reunimos conte\u00fado do blog Debug True<\/a>\u00a0e do blog Ferramentas Blog<\/a>,\u00a0abaixo voc\u00ea pode conferir<\/p>\n

 <\/p>\n

Layout Responsivos<\/h2>\n

Os layouts responsivos<\/b> s\u00e3o aqueles que precisam ter uma aten\u00e7\u00e3o maior da \u00e1rea de UX, quando \u00e9 analisada toda a usabilidade do site, contemplando todos os dispositivos e se poss\u00edvel partindo do princ\u00edpio \u201cmobile first\u201d, onde toda a arquitetura come\u00e7a sendo pensada a partir do menor dispositivo utiliz\u00e1vel seguindo em ordem crescente e adequando as informa\u00e7\u00f5es.<\/p>\n

O layout n\u00e3o segue a mesma estrutura em todos os dispositivos, muitos trocam as informa\u00e7\u00f5es de lugar para melhor visualiza\u00e7\u00e3o, as vezes escondem e mostram a partir de um click, mudam os tamanhos das fontes, \u00edcones e qualquer outro elemento.\u00a0Para esse tipo de desenvolvimento s\u00e3o utilizadas as media queries css e algumas libs como bootstrap<\/a>, \u00a0groundwork<\/a>\u00a0e\u00a0o\u00a0LazyLoad.<\/a><\/p>\n

A seguir voc\u00ea confere 3 estados diferentes para layout e sua respectiva rea\u00e7\u00e3o com a p\u00e1gina.<\/p>\n

    \n
  1. Monitores com resolu\u00e7\u00e3o de 1024px de largura ou superior e Internet Explorer 8 e inferior.\u00a0Foi declarado uma largura absoluta de 960 px para o corpo do site.<\/li>\n
  2. Largura igual ou inferir a 900px.\u00a0Aqui declaramos que existem apenas larguras relativas de 100%.<\/li>\n
  3. Largura igual ou inferir a 400px.\u00a0Ocultamos a sidebar do lado esquerdo (apenas para ilustrar o exemplo).<\/li>\n<\/ol>\n

    \"layout-responsivo-02\"<\/h2>\n

    Neste exemplo podemos ver claramente como o efeito cascata do CSS funciona corretamente com o Media Queries, desta forma o CSS que fizemos como padr\u00e3o \u00e9 mantido normalmente por todo o documento, sendo alterado apenas quando declaramos alguma modifica\u00e7\u00e3o com o Media Queries.<\/p>\n

    Note tamb\u00e9m que o css declarado para a largura de janela de 900px \u00e9 mantido para o de 400px.<\/p>\n

     <\/p>\n

    Layouts Flu\u00eddos<\/h2>\n

    Os layouts flu\u00eddos<\/b> s\u00e3o aqueles que acompanham o tamanho da tela, apenas aumentando e diminuindo, n\u00e3o trocando estrutura e n\u00e3o pensando muito na usabilidade, vamos pensar em acessar um site em uma tv de 50\u2033 e acessar o mesmo site em um celular onde esse site \u00e9 visto da mesma forma pelos 2 dispositivos, \u00e9 claro que ficar\u00e1 horr\u00edvel em um dos casos se n\u00e3o nos dois, para construir esse tipo de layout n\u00e3o se pensa muito em \u201cpx\u201d e sim em \u201c%\u201d, para que o elemento se estique de acordo com o pai tendo assim a sua \u201cfluidez\u201d. Aqui tem um exemplo simples de como ele funciona:\u00a0960.gs<\/a>.<\/p>\n

    Para ilustra melhor o que estamos dizendo, a imagem a seguir exemplifica um layout constru\u00eddo em “%”.<\/p>\n

    \"layout-fluido\"<\/p>\n

    Veja que caso o usu\u00e1rio tenha a tela muito grande o texto ficar\u00e1 praticamente em apenas uma linha e quando diminu\u00edmos a tela o texto fica totalmente espremido na sidebar.<\/p>\n

     <\/p>\n

    Layouts Flu\u00eddos H\u00edbridos<\/h2>\n

    Temos tamb\u00e9m os layouts flu\u00eddos h\u00edbridos<\/b> onde seguem o mesmo padr\u00e3o dos flu\u00eddos, por\u00e9m com uma limita\u00e7\u00e3o de largura, nesse caso utilizamos o \u201cmax-width\u201d e \u201cmin-width\u201d assim conseguimos ter certo controle do layout.<\/p>\n

    Para demonstrar como funciona o Flu\u00eddo H\u00edbrido, \u00e9 aplicado um\u00a0max-width<\/em> de 960px e min-width<\/em> de 600px no exemplo anterior.<\/p>\n

    \"layout-fluido-hibrido-02\"<\/p>\n

     <\/p>\n

    Para conferir na pr\u00e1tica a diferen\u00e7a entre cada layout, na lista abaixo\u00a0abaixo voc\u00ea pode acessar um exemplo de p\u00e1gina para cada tipo\u00a0layout. Apenas altere o zoom da p\u00e1gina para testemunhar o efeito de cada layout em diferentes resolu\u00e7\u00f5es de tela.<\/p>\n