Q:

Existe alguma maneira de autoajustar o site para celulares?

estou fazendo um mini-projeto onde no PC o mesmo não apresenta problemas na visualização da página. Mas quando testo no celular a coisa muda um pouco de figura, vejam o print dos dois testes por favor:

No primeiro a parte do painel fica ocupando o footer, o meu código é basicamente este:
<div class="panel panel-default">
<div class="panel-body">
Conteúdo aqui.
</div></div>

Já no segundo o site fica todo deformado, a ponto de certos objetos desaparecerem da página. Existe algum ajuste ou script que posso usar para contornar esse problema? Obrigado desde já.

A:

Existe sim, você pode inclusive utilizar algum framework exemplo: Bootstrap.
Vou deixar um exemplo abaixo caso você não queira utilizar nenhum framework e fazer tudo na 'mão' :
/* Small devices ( @screen-sm-min Phones (<768px) ) */
@media (min-width: 368px) {

}

/* Small devices (@screen-sm-min tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Medium devices ( @screen-md-min desktops, 992px and up) */
@media (min-width: 992px) { 

}

/* Large devices ( @screen-lg-min large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

Agora dentro de cada @media você pode alterar seus containers, elementos, etc... de acordo com a resolução.

