Diferenças na resolução original do "design responsive"

[aalvesaquino 0]

Pessoal, bom dia!

 

Seguinte, estou desenvolvendo o meu primeiro site com design responsive e estou com problemas com medidas (rsrsrs)... Fiz o HTML e o CSS com "%" e "em" embasado em um layout do photoshop de 1350px em um monitor com resolução de 1600px. Quando comecei a implementar as media querie, notei que se colocar a tela em 1350px (Plugin do Chrome, Resize Window), já quebra os elementos. Como posso solucionar esse caso?

[rikaschmitt 54]

Tenta utilizar um sistema de grids, te ajudará bastante no quesito "responsivo".

Alguns famosos e mais utilizados são: Bootstrap e Foundation. Dá uma pesquisada sobre eles...

 

E realmente, nem tudo você consegue fazer responsivo.. precisa editar alguns breakpoints manualmente.

[Lucas Medina 17]

Opa!

Se eu entendi bem, você fez tudo utilizando porcentagens, mas o layout possui largura base de 1350px, certo?

 

Por que não tenta manter esta largura base como 1350px, ao invés de fazer o layout todo com porcentagens?

As media queries servem exatamente para você manipular o CSS diante destes fatores, como largura de tela, e etc.

Por exemplo:

@media (max-width: 1280px) {
  .container {
    width: 1000px;
  }
}

@media (max-width: 1024px) {
  .container {
    width: 860px;
  }
}  

.container {
  width: 1350px;
}

Faça o site com os tamanhos e proporções definidas, e crie alternativas para resoluções diferentes.

Isso pode funcionar bem para você.

[aalvesaquino 0]

Tarde!

 

rikaschmitt, vou pesquisar sobre as grids, vlw!

Lucas, somente a largura base tá com 1350px, o restante tá tudo em percentual, então quando eu diminuo um pouco a tela ele já quebra os elementos... ah, e aproveitando: as "em" das fontes não deveriam diminuir junto, proporcional?

[rikaschmitt 54]

Tarde!

 

rikaschmitt, vou pesquisar sobre as grids, vlw!

Lucas, somente a largura base tá com 1350px, o restante tá tudo em percentual, então quando eu diminuo um pouco a tela ele já quebra os elementos... ah, e aproveitando: as "em" das fontes não deveriam diminuir junto, proporcional?

 

Então AAlves, o que o Lucas disse é que você precisa variar a largura base de acordo com a resolução. Pois mesmo setando uma como 1350px, se você diminuir a tela, a base continua com 1350px e os elementos irão se basear nesse valor.

 

Teste com as @media que ele citou, você verá diferença.

 

Sobre o "em", não. Na verdade não entendo muito sobre "em" e "rem" e tals, só sei que são unidades mais flexíveis que o pixel, pois ele varia de acordo com o dispositivo (monitor, celular, etc). Ou seja, é apenas uma forma de você dizer que 15px ou 1.5em serão iguais em todas as telas... Algo assim hahahaha.