Centralizar e modificar elementos de acordo com a resolução da tela

[rikaschmitt 54]

Olá pessoal.

 

Estou tento dificuldades em finalizar o meu site.

Na página index, o conteúdo central deve ficar alinhado no centro da tela em qualquer resolução, inclusive o tamanho das fontes dos textos será alterada de acordo com o tamanho da tela.

 

Estou usando "@media screen", só que uma resolução está anulando a outra. Estou usando:

 

@media screen and (max-width:1024px) { // para 1024x

@media screen and (max-width:1360px), (max-width:1366px) { // tanto para 1360 ou 1366

@media screen and (max-width:1440px) { // para 1440

@media screen and (max-width:1600px) { //para 1600 ou mais

 

Então, o problema é que, se eu deixar somente o @media do 1024 ativo, ele funciona perfeitamente na resolução 1024. Agora, se eu acrescentar o @media da 1360, o 1024 perde a função e só fica válida a configuração pro 1360.

 

Algm sabe como corrigir isso?

[Marlon Pacheco 132]

Você está testando em qual resolução ?

Você colocou a meta tag viewport ?

[rikaschmitt 54]

Meu monitor é 1440.

Mas, aparentemente, consegui solucionar.

 

Eu estava usando os @media em ordem crescendo de resolução. Inverti a ordem, começando pela maior.. e funcionou!! :D Não sei se foi sorte ou se realmente é assim que finciona...

 

Sobre o viewpoint, estou usando sim.

<meta name="viewport" content="width=1024" />

 

pq?

[Marlon Pacheco 132]

Pois é, estou achando que foi sorte, pq se você desenvolver pensando em mobile-first, por via de regra, vai começar com as resoluções menores e vai aumentando.

Nunca testei isso.

Perguntei do viewport porque muita gente esquece dele, aí as media queries não funcionam.

Você tem algo "fora" das media queries?

[rikaschmitt 54]

Na verdade, ele não é mobile-first.. é.. funcionou! rsrs

 

O viewpoint adicionado é para, supostamente, deixar o site apresentável em iPads ou similares.

 

Então.. sim, há todo o resto do conteúdo fora dos @media.

Como disse, apenas a "index" que será necessário configurar os elementos para a resolução.. as demais internas são normais e adequadas ao 1024 por padrão.

[rikaschmitt 54]

Enfim, o problema foi solucionado arrumando a ordem das @media.

 

Unico problema que tive que fazer manualmente, é alinha uma div centralizada na resolução... tive que setar valores individuais de margin.