2

Gostaria de saber o que estou fazendo de errado, quero que quando o usuário entre no meu site pelo celular, mude algumas dimensões da minha página, background e outras coisas que vou alterar..

@media screen and (max-width: 480px){
div#container {
    background-color: red;
    margin: 2% 0 2% 0;
}
}

#container {
	background-color: silver;
	margin: 2% 12% 2% 12%;
	padding: 2% 5% 2% 5%;
	color: #252525;
}
<!DOCTYPE html>
<html lang="PT-BR">
<head>
	<title></title>
		<link rel="stylesheet" href="_css/estilo.css"/>
			<meta charset="UTF-8"/>
</head>
<body>

<div id="container">

<p> aqui eu tenho alguns parágrafos no meu site..</p>

<p>porém visto pelo celular fica muito pequeno ou as margens ficam muito grande, queria que se tornasse responsivo</p>
</div>
</body>
</html>

Obs: Já olhei outros tópicos relacionados aqui no site porém na prática eu não consegui, então resolvi postar. Agradeço desde já!

2
  • Bom dia! Já que a solução apresentada pelo Alexandre não funcionou. Verifique se não existe algum css de maior importância sobrescrevendo o seu. Testa parte do seu código colocando o !important. Commented 15/09/2017 às 13:04
  • Recomendo o uso do framework bootstrap Commented 17/09/2017 às 10:00

4 Respostas 4

2

tente utilizar bootstrap : http://getbootstrap.com/ vai te ajudar muito!

usando esses links voce vai estar adicionando o boostrap no seu codigo podendo assim utilizar as classes do mesmo fazendo seu codigo responsivo, mais informações acesse: http://getbootstrap.com/

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

5
0

Pelo que percebi, não foi feita a referencia para a biblioteca bootstrap. Dê uma olhada nesta documentação e adicione esta referencia na página:

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css" />

Altere também a media query desta forma:

/* Dispositivos pequenos (tablets, 768px e superiores) */
@media (min-width: @screen-sm-min) { 
        #container {
        background-color: red;
        margin: 2% 0 2% 0;
       }
     }

/* Dispositivos médios (desktops, 992px e superiores) */
@media (min-width: @screen-md-min) { 
 #container {
    background-color: silver;
    margin: 2% 12% 2% 12%;
    padding: 2% 5% 2% 5%;
    color: #252525;
 } 
}

/* Dispositivos grandes (desktops grandes, 1200px e superiores) */
@media (min-width: @screen-lg-min) { 
 #container {
    background-color: silver;
    margin: 2% 12% 2% 12%;
    padding: 2% 5% 2% 5%;
    color: #252525;
  }
 }
4
  • adicionei, mas não modifica ainda amigo.
    – Fabio
    Commented 14/09/2017 às 19:59
  • Coloquei no código também uma alteração na sua media query. Veja agora Commented 14/09/2017 às 20:14
  • E inclui os outros tamanhos de tela para o layout alternativo Commented 14/09/2017 às 20:22
  • Alterei o media query e mesmo assim não deu certo
    – Fabio
    Commented 14/09/2017 às 20:45
0

O erro é bem simples, acrescenta uma meta tag, para controlar a abertura no navegador.

<meta name="viewport" content="width=device-width" initial-scale="1.0">

Isso faz com que o navegadores móveis se comportem como navegadores de desktop, o que é bem comum quando estamos fazendo um layout responsivo, não precisa nem se preocupar nos significados dessa meta tag, é só colocar em todos os layouts que for fazer.

0

Dentro da tag <head> Você tem que colocar o seguinte codigo:

<meta name="viewport" content="width=device-width" initial-scale="1.0">

Você pode também utilizar o Bootstrap para fazer sites responsivos.

Site do Bootstap

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .