← Desenvolvimento

Transformando Layout Fixo em Fluído

Lida 3853 vezes

Offline

Mig_x 
Membro
Mensagens 50 Gostos 0
Troféus totais: 22
Trófeus: (Ver todos)
50 Posts Level 5 Level 4 Windows User Linux User Mobile User Super Combination Combination Topic Starter Level 3

Olá! Como faço para transformar o layout do meu site em fluído ?
Offline

xoli202 
Membro
Mensagens 27 Gostos 8
Troféus totais: 11
Trófeus: (Ver todos)
Linux User Mobile User Windows User Combination Level 2 Level 1 10 Posts First Post Third year Anniversary Second year Anniversary

O ideal seria usar o Bootstrap, mas não sei se o layout é de uma tema do Wordpress ou algo do género e se percebes de html e css. O que tens que fazer é garantir que não tens larguras fixas (width) mas relativas, ou seja, em percentagem. Por exemplo uma div com com style "width: 900px" vai ter uma largura de 900px enquanto que "width: 100%" vai ajudar a div ao seu elemento "pai". Assim garantes que a div se vai ajustar de acordo com a resolução.
Offline

Mig_x 
Membro
Mensagens 50 Gostos 0
Troféus totais: 22
Trófeus: (Ver todos)
50 Posts Level 5 Level 4 Windows User Linux User Mobile User Super Combination Combination Topic Starter Level 3

Sim eu percebo de html e css, o "problema" é que estou a dar continuidade a uma pagina que está uma confusao no codigo...e queria uma maneira que desse para transformar isto em responsivo.
Offline

xoli202 
Membro
Mensagens 27 Gostos 8
Troféus totais: 11
Trófeus: (Ver todos)
Linux User Mobile User Windows User Combination Level 2 Level 1 10 Posts First Post Third year Anniversary Second year Anniversary

Tens que avaliar se vale a pena fazer as alterações necessárias para ficar responsive ou começar o layout de novo com base no bootstrap, por exemplo. Se não tens tempo para refazer todo o layout ou não te compensa, então tenta alterar a largura dos elementos html que têm larguras fixas começando de cima para baixo, ou seja, tag html > body > ...
O que importa mesmo é tornar o site responsive.
Offline

Mig_x 
Membro
Mensagens 50 Gostos 0
Troféus totais: 22
Trófeus: (Ver todos)
50 Posts Level 5 Level 4 Windows User Linux User Mobile User Super Combination Combination Topic Starter Level 3

Por exemplo, na media queries tenho assim:

@media screen and (max-width:320px){
}

@media screen and (min-width:321px) and (max-width:480px){

}

por ai adiante ate 1920px

Só que em algumas resolucoes fica mal :-?