Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

First

responsivo

Por , em Desenvolvimento frontend

Recommended Posts

First    1

First
Postado

Bom,



Eu tenho um site pronto em PHP, HTML e jQuery/JavaScript... tenho o site pronto bonitinho, queria saber como posso deixar ele responsivo para pegar em todas as resoluções de telas 'polegas'...




Alguém me da uma força ai para fazer oque desejo?



Já vi vários vídeos mais nada me ajudo tentei até usar Framework e nada.



Alguém pode também me dar um exemplo de como que é? de como fazer? me ensinar...


Compartilhar este post

Link para o post
Compartilhar em outros sites

First    1

First
Postado

Amigo não entendi muito bem mais acho que eu entendi, não sei.

 

Por exemplo quero que uma div seja responsivo em 3 resoluções de tela, de 1024, 768 e 320

 

Eu teria que fazer o CSS desta div nesta forma? exemplo.

 

Resolução '1024'

@media screen and (max-width: 1024px) {
	#barra1 {
	width: 100%;
	height: 34px;
	background: #fefefe;
	border-top: 2px solid #02A4FF;
	position: absolute;
	top: 0px;
	left: 0px;
	}
}

Resolução '768'

@media screen and (max-width: 768px) {
	#barra1 {
	width: 100%;
	height: 34px;
	background: #fefefe;
	border-top: 2px solid #02A4FF;
	position: absolute;
	top: 0px;
	left: 0px;
	}
}

Resolução '320'

@media screen and (max-width: 320px) {
	#barra1 {
	width: 100%;
	height: 34px;
	background: #fefefe;
	border-top: 2px solid #02A4FF;
	position: absolute;
	top: 0px;
	left: 0px;
	}
}

Estou certo? ou errado? Se eu tiver errado peço que me corrige por favor e me da mais exemplos por favor.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado

Está certo E "errado". No seu exemplo a div não tem nenhuma diferença entre as 3 resoluções, então ela pode ficar 'de fora' das media queries.

Estaria certo se, por acaso, você estiver considerando que, em telas maiores que 1024px, a div terá 80% de largura e margin auto pra centralizar.

Conseguiu captar a ideia?

Compartilhar este post

Link para o post
Compartilhar em outros sites

First    1

First
Postado

Não conseguir captar sua explicação muito bem, vejamos... por exemplos novamente rsrs.

 

Olhe se eu certo ou errado, tente me explicar melhor.

 

Resolução '1024'

@media screen and (max-width: 1024px) {
	#barra1 {
	width: 1024px;
	height: 34px;
	background: #fefefe;
	border-top: 2px solid #02A4FF;
	position: absolute;
	top: 0px;
	left: 0px;
	}
}

Resolução '768'

@media screen and (max-width: 768px) {
	#barra1 {
	width: 768px;
	height: 34px;
	background: #fefefe;
	border-top: 2px solid #02A4FF;
	position: absolute;
	top: 0px;
	left: 0px;
	}
}

Resolução '320'

@media screen and (max-width: 320px) {
	#barra1 {
	width: 320px;
	height: 34px;
	background: #fefefe;
	border-top: 2px solid #02A4FF;
	position: absolute;
	top: 0px;
	left: 0px;
	}
}

E agora?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado

Não cara. Olha só.

Como tu já tem o site pronto, o melhor é criar o estilo de acordo com o teu conteúdo e não seguir o 'mobile first'.

Abre o teu site e vai redimensionando o navegador. Onde ocorrer uma quebra, anota como 'uma media querie'.

Não vá por resoluções padrão, pois nem sempre os devices seguem esses padrões, eles são apenas mais comuns.

Uma leitura que vale a pena, http://sergiolopes.org/media-queries-conteudo/.

Compartilhar este post

Link para o post
Compartilhar em outros sites

First    1

First
Postado

Amigo li todos os artigos que você mim passou reli e não conseguir entender como fazer um layout responsivo com todas as resoluções e telas'polegadas'.

 

Tem como você fazer um exemplo e me mostrar, e falar onde devo mexer, é ali faz isso muda isso coloca isso para eu deixar todo o meu layout index.php responsivo?

 

 

Irei aguardar sua resposta.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado

No teu index.php teu tem um style.css, certo ?

Então, dentro dele tu vai colocar as media queries.

Como tu já tem o sistema pronto, é só começar a escrever no final do css.

Esse teu sistema está publicado?

Compartilhar este post

Link para o post
Compartilhar em outros sites

First    1

First
Postado

Amigo não está publicado estou fazendo ainda não é bem um sistema são apenas 3 arquivos .php que contem somente html css e javascript primeiro index.php, contato.php e suporte.php Éehh eu não entendi oquee é queries não faço a minima ideia de onde começar e por onde. Tem como você mim der um exemplo? Peço que seja paciente com migo pois estou começando agora sobre este assunto responsivo, fui saber que isso existia a uma semana atras.

 

E agora?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado

Então cara, tá mais que detalhado no post da Dani Guerrato que passei, o post do Tableless. Os código que tu me passou estão corretos. Tu coloca eles no css principal.

Estou bem paciente cara, é você que está com pressa. Você tá querendo entender RWD (Responsive Web Design) em uma única thread de fórum.

O post do Tableless é a segunda parte, tem um antes daquele, com a parte mais teórica. Dá uma olhada nele tbm.

Compartilhar este post

Link para o post
Compartilhar em outros sites

First    1

First
Postado

Amigo acho que estou apreendendo, obrigado. Mas mim dar uma força ai veja se eu estou certo ou errado.

 

C:\wamp\www\site\css\style.css

 

Então no <head> teria que chamar meu css assim?

 

Está assim:

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

Deveria ficar assim?:

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

ou troco o screen para print no style.css só tem o css que eu passei acima

 

E agora?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado

É isso aí mesmo. Media=print é pra impressora. Tu vai imprimir as páginas?

No HTML5 não precisa do type="text/css", pode tirar fora.

Compartilhar este post

Link para o post
Compartilhar em outros sites

First    1

First
Postado

Então amigo, não irei imprimir páginas no meu site pelo menos por enquanto.

No meu style.css contem este texto em formatação de css.

/*Resolução '1024'*/
@media screen and (max-width: 1024px) {
	#barra1 {
	width: 1024px;
	height: 34px;
	background: #fefefe;
	border-top: 2px solid #02A4FF;
	position: absolute;
	top: 0px;
	left: 0px;
	}
}
/*Resolução '768'*/
@media screen and (max-width: 768px) {
	#barra1 {
	width: 768px;
	height: 34px;
	background: #fefefe;
	border-top: 2px solid #02A4FF;
	position: absolute;
	top: 0px;
	left: 0px;
	}
}
/*Resolução '320'*/
@media screen and (max-width: 320px) {
	#barra1 {
	width: 320px;
	height: 34px;
	background: #fefefe;
	border-top: 2px solid #02A4FF;
	position: absolute;
	top: 0px;
	left: 0px;
	}
}

Que dizer que eu entrar em um dispositivo que contem a resolução ativa de 1024px ele irar funcionar do css de 1024? e assim como nos outros?

 

Se eu quiser deixar o type="text/css" meu media="screen" posso deixar?

 

 

O'Que está faltando agora?

Compartilhar este post

Link para o post
Compartilhar em outros sites

First    1

First
Postado

Amigo, por exemplo eu tenho um CSS de 309 ai para eu deixar esse ele responsivo para a resolução 768 eu teria que colocar isso no início do CSS? Exemplo:

@media screen and (max-width: 768px) {
	Folha de estilo CSS de 309 linha
}

é isso ou estou errado?

 

O'Que devo fazer?

Compartilhar este post

Link para o post
Compartilhar em outros sites

First    1

First
Postado

Amigo, não funcionou eu acho.

Que tal fazemos manualmente? ou então me explique melhor não estou sabendo usar esta ferramenta.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito