Site responsivo

Toniotti · 4 de abril de 2017

To criando um site, mas quando coloco ele em resoluções diferente fica tudo fora do lugar, tipo as imagens até ficam normal mas eu coloquei alguns textos por cima das imagens e os textos estão ficando em locais totalmente diferentes, mesmo usando %. Alguém sabe como fazer o site se adequar a todas as resoluções?

Arquivo css:

body {
	margin-left: 0%;
	margin-top: 0%;
}

#title {
	position: absolute;
	top: -10px;
	color: grey;
}

#information {
	position: absolute;
	top: 100px;
	left: 25%;
	color: grey;
}
#menu {
	position: absolute;
	left: 40%;
	top: 500px;
}

}

#thumb1 {
	position: absolute;
	left: -50%;
	top: 500px;
}

Arquivo html:

<!DOCTYPE html>
<html>
<head>
	<title>Anime PG</title>
	<link rel="stylesheet" type="text/css" href="pg.css">
</head>
<body>
<h1 id="title">Kobayashi-san Chi no Maid Dragon</h1>
<img src="kobayashi/fundo.png" width="1920">
<div id="information">
	<h2>Episodios: 09/13</h2>
	<h2>Lançamento: 12/01/2017</h2>
	<h2>Qualidade: HD</h2>
	<h2>Nota MAL: 8.13</h2>
	<h2>Mais informações: <a href="https://myanimelist.net/anime/33206/Kobayashi-san_Chi_no_Maid_Dragon/">MyAnimeList</a></h2>
	<div id="thumb1">
	<img src="kobayashi/thumb/thumbnail1.png">
	</div>
</div>
</div>
</body>
</html>

dwatashi · 4 de abril de 2017

Alguns sites na verdade usam sistema dinâmico por perfis.

Por exemplo, móveis e faixas de resolução.

Outra opção e configurar para uma resolução baixa, como 1024x768. Assim nas maiores ele fica com espaço sobrando mas na maioria fica visualizando de forma correta.

DiF · 4 de abril de 2017

@Toniotti Olá, para contornar esse problema você pode usar as chamadas medias queries do CSS3.

Foi criada justamente para fazer uma adaptação para diferentes resoluções.

Com ele você define uma faixa de resolução por exemplo até 320px aplica uma regra de estilo.

Exemplo

@media screen and (min-width: 480px) {
    #conteudo {
        background-color: red;
    }
}

@media screen and (min-width: 1024px) {
    #conteudo {
        background-color: green;
    }
}

@media screen and (min-width: 1280px) {
    #conteudo {
        background-color: blue;
    }
}

Veja que tem 3 regras diferentes para resoluções diferentes, mas para o mesmo elemento #conteudo.

Este método é chamado de "adaptativo", mas ainda não chega a ser responsivo.

Para chegar na responsividade, você pode combinar os media queries com tamanhos dos elementos em forma liquida( percentagem) ao invés da forma fixa em pixel.

Deixo uma leitura sobre os princípios básicos do web design responsivo.