responsive site

T

travel_

Membro
boa noite a todos,
estou a começar a fazer o meu primeiro site e pretendo que ele seja responsivo..
procurei na net mas não consegui aplicar o que era explicado..

alguem me sabe dizer que linhas de código devo usar?

saudações
 
eu já tentei implementar formas diferentes de o fazer e não resulta..

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

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


<title>Comunication Design</title>

<link rel="stylesheet" type="text/css" media="screen and (min-width: 0px)" href=small.css/>
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href=medium.css/>
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1350px)" href=large.css/>


<link href="css/reset.css"/ rel="stylesheet" type="text/css">
<link href="css/style.css"/ rel="stylesheet" type="text/css">

<body>



<nav>

<ul>

<li> <a href="About.html">About</a></li>
<li> <a href="Work.html">Work</a></li>

</ul>

</nav>

<div class="1arquivo"

<footer>
© 2019
</footer>

</body>
</html>
 
nao precisas disto:
<link rel="stylesheet" type="text/css" media="screen and (min-width: 0px)" href=small.css/>
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href=medium.css/>
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1350px)" href=large.css/>

no teu css style.css tens de ter tipo:
imagina que queres mudar a cor de fundo e tamanho texto em mobile

.arquivo {
width: 100%;
max-width: 1200px; //diz que a minha largura só vai até 1200px por exemplo, mas a baixo de 1200 é flexivel (tem os 100%)
background-color: red;
}

h1 {
font-size: 20px;
}

//até um máximo de 767px as definições são as seguintes

@Media (max-width: 767px) {
.arquivo {
background-color: green;
}

h1 {
font-size: 10px;
}
}



.....

depois tens as colunas, mas isso é outra conversa
vai fazendo o básico para brincar e aprender
 
Conforme indicado na primeira resposta, usa bootstrap.
Irá facilitar-te a vida e muito e tu só vais ter que ajustar pequenos detalhes.

Caso contrário, se queres ser tu a fazer tudo, pesquisa por media queries.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo