[RESOLVIDO] Página Responsiva

Preciso tirar dúvidas e ter suporte
1

Amigos, preciso de uma ajuda.

Sempre faço os layouts com as fotos com 300 px no html, fui copiar de um app para o outro o mesmo assunto, quando colado do outro html do outro app que recebeu as informações, as fotos caíram em tamanhos reais, maiores de 300px. Mas pra minha surpresa elas encaixaram na tela como se fosse responsiva, encaixadas perfeitamente, mesmo em tamanhos maiores.

Preciso saber como posso continuar trabalhando desta forma?
Eu tentei fazer isso construindo do zero e não consegui deixar responsiva como copiada.
Pois assim o layout se encaixa em qualquer tupo de tela.

2

@Andrei_LAYAPP bom dia tudo bem !

Amigo você consegue se souber trabalhar com html e css, é possível fazer um página exibir de uma maneira em um computador e de outra maneira no celular.

eu mesmo faço sistemas web que roda de uma maneira no computador e de outra maneira no celular.

3

A questão é a seguinte.
Como é que consigo deixar permanentemente dessa forma, responsiva?

Não é a primeira vez que isso acontece, e quero que fique dessa forma mesma pra se ajustar em qualquer tela.

4

Andrei, igual eu falei, você deverá fazer um css onde se for identificado a resolução x fique de um tamanho e quando a resolução for y ele fique de outro tamanho.

abaixo um código simples de css para um site com configuração responsiva

/* Geral */
body{
font-family: Helvetica, Arial, sans-serif;
color: #4d4d4d;
margin: 0;
}

/* NAVEGAÇÃO */

h1,h2,h3{
margin: 0;
font-family: Helvetica, Arial, sans-serif;
}

.botao{
color: #f1f1f1;
text-decoration: none;
padding: 10px 30px;
background-color: #045FB4;
font-size: .9em;
border-radius: 7px;
}

nav{
display: flex;
flex-direction: column;
align-items: center;
background-color: #4d4d4d;

}

nav > a {
text-decoration: none;
color: #f1f1f1;
font-weight: bold;
font-size: 28px;
font-family: Pacifico, serif;
}

nav ul{

padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;

}

nav ul li{
text-align: center;
width: 100%;
padding: 1%;

}

nav ul li a{
display: inline-block;
padding: 10px 0;
width: 100%;
text-decoration: none;
color: #f1f1f1;
}

nav ul :hover {
background-color: #A4A4A4;
}

/* Cabeçalho */

header {
background-image:url(‘img/fundo.jpg’);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #f1f1f1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding:20px;
}

header p{
margin-bottom: 2em;
}

/* Sobre */
#sobre{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 20px 20px;
background-color: #045FB4;
color: #f1f1f1;
}

#sobre .botao{
background-color: #f1f1f1;
color: #4d4d4d;
}

#sobre p{
margin-bottom: 2.5em;
max-width: 1000px;
}

/* Serviços */

#servicos{
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}

#servicos div {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 30px;
}

/* Portfolio */

#portfolio{
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
}

#portfolio h2{
margin-bottom: 20px;
}

#portfolio img{
width: 100%;
}

/* Contato */

#contato {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: 20px;
}

/* Footer */

footer{
text-align: center;
padding: 10px;
background-color: #4d4d4d;
color: #f1f1f1;
}

/configuração responsiva/
@media screen and (min-width: 768px){

/* Navegação */

nav{
	flex-direction: row;
	justify-content: space-around;
}

nav ul{
	flex-direction: row;
	width: 70%;
}

/* Cabeçalho */

header{
	height: 60vh;
	justify-content: space-around;
}

/* Sobre */

#sobre {
	height: 250px;
	height: 30vh;
	justify-content: space-around;
	min-height: 250px;
}

/* Serviços */

#servicos{
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	max-width: 1000px;
	margin: 0 auto;
}

#servicos h2 {
	text-align: center;
	width: 100%;
}

#servicos div{
	flex-grow: 1;
	flex-basis: 150px;
	padding: 0 10px:
}

/* Portfolio */

#portfolio{
	flex-direction: row;
	flex-wrap: wrap;
}

#portfolio h2{
	width: 100%;
	text-align: center;
}	

#portfolio img{
	width: 33%;
}

/* Contato */

#contato {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 500px;
	margin: 0 auto;
}

#contato h2,
#contato p{
	width:100%;
}

}

5

Agora deu pra entender melhor.
Obrigado

1 curtida
6