Adaptar Pagina Para Responsivo

Olá galera.
Estou desenvolvendo um Sistema web com php, mas me deparei com um problema, no caso para min, sou iniciante e possuo pouco conhecimento, a minha duvida é, como tenho uma porrada de informação na tela, sera possível deixar essa pagina toda responsiva?, é muito complicado o processo?, o que tanto teria que fazer para deixar?, Vou Upar o Código no Pastebin, é um código um pouco grande.
Tentei acessar pelo celular e ele esta zuando toda a tela, o posicionamento não ficou totalmente igual, por isso a duvida do responsivo.
Um problema é que estou usando muita Div com posicionamento…

Código
http://pastebin.com/3gisMsyF

Imagem

Obrigado desde Já!
Abraços

Leia sobre bootstrap e seu sistema de Grids e “peso” dos itens da tela… isso vai lhe ajudar muito.

:wink:

1 curtida

Primeiro passo é pensar no design que vc acha que ficaria melhor no mobile. Pegando sua tela, uma imagino que o melhor seria colocar todos os campos em 1 coluna só. As 2 colunas do desktop nao vão ficar boas no mobile.

Já o menu no topo é grande tbm. Você provavelmente vai querer colapsar o menu em algum ícone que, quando clicado, abre as opções. É o mais comum. Ou voce pode fazer um menu em 2 linhas, ou esconder algumas opcoes secundarias. Precisa escolher.

Para implementar o design que vc escolher, vc precisa de Media Queries no CSS. Conhece?

1 curtida

no <head></head> de sua pagina coloca
<link rel="stylesheet" href="estilo.css" media="screen and (max-width: 480px)" /> <-- esse codigo fica para esse tipo de resolução de 0px ate 480 ou seja celulares ai vc cira outro css

<link rel="stylesheet" href="estilo.css" media="(min-width: 480px) and (max-width: 900px)" /> <-- esse já fica para telas maiores

e assim você vai formatando seu sistema