1

Atualmente trabalho com três queries sempre baseando na largura mínima e largura máxima da tela. A Mobile define de 250px a 480px, a Tablet coloquei como 481px a 1023px e a de Desktop coloquei a partir de 1024px.

Atualmente nos aparelhos que testei estão funcionando com apenas bugs pequenos que não atrapalham o uso porém amigos e desenvolvedores teem relatados problemas de quando a responsavidade do site. O site é o seguinte:

http://webt.pe.hu/bluc/index.html

esse é um domínio de teste, e deixo uma NOTA, tenho apenas a página Cortana pronta, então cliquem no circulo cortana a para ver o corpo do site.

A grande duvida está sendo na declaração dessas queries, tenho que declarar ela baseando tambem na altura? Qual é a melhor maneira de declarar as mesmas? E em html, posso usar alguma meta para ajudar nisso?

EDIT

/* ----------------------------------------------------------------------------------------- */
/* Telas Pequenas */
@media (min-width: 249px) and (max-width: 480px) 
{

}

/* ----------------------------------------------------------------------------------------- */
/* Telas Médias */
@media (min-width: 481px)  and (max-width: 1024px) 
{

}

/* ----------------------------------------------------------------------------------------- */
/* Telas Grandes */
@media screen and (min-width: 1024px) 
{

}

/* Geral */
7
  • Por favor informe qual o problema que está tendo: comportamento desejado e comportamento atual, e se possível os trechos de código relevantes. Do contrário, teríamos que sair fuçando à procura de problemas, sem saber direito o que procurar (a menos que o problema fosse óbvio, é claro). P.S. O link está correto? Aqui está dando 404.
    – mgibsonbr
    Commented 5/11/2015 às 18:53
  • Consertei o link.. Realmente não descrevi erro porque eu não sei qual é o erro, testei em dois desktop totalmente diferentes, um wide screen e outro monitor quadrado e em ambos funcionou perfeitamente, o mesmo aconteceu com um tablet, e 3 smartphones de resoluções diferentes. Porém alguns amigos e desenvolvedores que pedi para acessar tiveram problemas de visualização.
    – Leonardo
    Commented 5/11/2015 às 19:04
  • Logo imagino que o problema são nos queries media que estou usando, dei detalhes dela no tópico e para ver elas em ação é so entrar no link, dar um ctrl+U e abrir qualquer um arquivo de estilo, com exceção do bootstrap, hover e font, que são frameworks.
    – Leonardo
    Commented 5/11/2015 às 19:06
  • 1
    Não é viável olhar seu site inteiro atrás de erros. Olhe esta foto de como o mesmo fica em meu monitor. No arquivo que vi, index.css, você não trata resoluções acima de 1024. E é exatamente nesta que meu monitor se encaixa. Caso queira uma resposta mais completa, a noite terei tempo para ajudar melhor
    – Randrade
    Commented 5/11/2015 às 19:48
  • 1
    @LeonardoVIlarinho Esses seus amigos disseram qual Sistema Operacional e browser eles estão usando? Eu não reparei nada de incomum ou que pudesse ser melhorado nos poucos css que eu vi (só abri alguns, não olhei todos), mas eu notei que a disposição dos elementos varia com a altura da janela (Win7, Chrome: i.sstatic.net/b9MPJ.jpg). É seu objetivo que a tela não role? Se for, sua pergunta sobre "declarar baseado também na altura" provavelmente teria como resposta "sim" (só que eu não tenho experiência com esse tipo de tela pra opinar).
    – mgibsonbr
    Commented 5/11/2015 às 20:48

1 Resposta 1

3

Primeiramente, você deve prestar atenção em alguns pontos.

Você está trabalhando com bootstrap. Não sei se você conhece, mas bootstrap é uma ferramenta extremamente poderosa, tanto em css como em javascript, possuindo diversos plugins pré-prontos que facilitariam muito sua vida desenvolvendo (especialmente se você não é um usuário avançado), além de ter um sistema de grid excelente voltado para sites responsivos.

Recomendo fortemente que você estude mais o bootstrap para fazer esse tipo de website.

Mas, caso você deseje fazer o desenvolvimento bruto, aqui vão algumas considerações.

Você deve definir um objetivo principal para o desenvolvimento do seu css, como:

  • O meu site deve rodar principalmente em celulares e tablets?
  • O meu site deve rodar mais em notebooks e desktops?
  • Quem é o meu usuário? De onde ele está acessando meu site?

A partir dai você consegue definir se irá desenvolver ele em Mobile First (voltado para mobile como prioridade) ou se irá desenvolver de modo padrão, efetuando os ajustes conforme for diminuindo as telas - se necessário.

A grande questão aqui é o fluxo de desenvolvimento, e não as @media que você deve usar. Se o seu desenvolvimento for com foco em Mobile First, comece o seu código css voltado para celulares e tablets e somente mude o layout quando for preciso passar para uma tela maior. Por exemplo, se você deseja uma lista de notícias com 1 coluna no celular e 3 colunas no computador, você deve utilizar um css mais ou menos assim:

.coluna {
   display:inline-block;
   width:100%;
   background:#fff;
   border-radius:3px;
   border:1px solid #eee;
}
@media(min-width:1024px) {
    .coluna {
        width:33%;
    }
}

Deste modo, a coluna terá a mesma aparência em todas as resoluções, com exceção da largura, que irá mudar de 100% para 33% quando atingir uma resolução maior que de um tablet(neste exemplo, 1024px). As demais definições irão se repetir, a não ser que você sobrescreva o css dentro do @media(min-width:1024px).

A partir do momento que você define o código dentro de um min-width e max-width ele ficará restrito àquele intervalo somente, ou seja, as propriedades não serão passadas adiante.

7
  • 2
    Excelente ponto sobre o bootstrap, de fato incluir o bootstrap numa página e não usar o sistema de grid é um baita desperdício do potencial dessa plataforma. Com grids a gente trabalha mais com classes prontas do que [diretamente] com media queries. Sugiro ao AP que leia um pouco sobre o assunto, aqui por exemplo tem uma introdução ao sistema de grid.
    – mgibsonbr
    Commented 5/11/2015 às 21:21
  • Bom, eu não sabia da grid vou dar uma estudada na mesma, sobre os medias para mim está certo, o controle de largura está correto só não consigo fazer o controle da altura.
    – Leonardo
    Commented 5/11/2015 às 22:21
  • 1
    Eu diria que na maioria dos casos é inútil você fazer o controle de altura, já que ele não tem um impacto tão grande na exibição do layout. Neste caso vale mais a pena manter o foco na orientação, se é portrait ou landscape, pois em alguns casos pode mudar o @media mesmo sendo o mesmo aparelho. Commented 5/11/2015 às 22:24
  • 1
    Sim. Mas dê uma lida no link do amigo @mgibsonbr e também procure por mais materiais sobre o bootstrap. Eu comecei usando ele e hoje eu tenho um arquivo que uso em TODOS os meus projetos, onde peguei somente o grid, fiz algumas pequenas adaptações para o meu fluxo de trabalho e utilizo em tudo que faço. É excelente! Commented 5/11/2015 às 22:44
  • 1
    Sim, se o seu site for responsive, não tem como fugir do uso de @media, a não ser que você crie um arquivo .css para cada tamanho, exemplo 498.css 768.css, 1024.css e faça o load do arquivo de modo dinâmico com js (exemplo). Mas seria horrível, pois teria que declarar TODAS as propriedades css em cada arquivo. E se mudar em um, deverá mudar em todos. Faça o layout css voltado para mobile e modifique apenas o necessário de modo crescente( 468px -> 768px -> 1024px). Commented 6/11/2015 às 11:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .