0

Estou começando a aprender agora sobre Media Querie e tenho uma duvida que não vi por ai a resposta.

Existe algum padrão na aplicação da media querie ?

É correto ter um arquivo media-querie.css com todas modificações ou o correto seria envolver todo o codigo em blocos de media-queries, sendo que por exemplo, o arquivo de index.css, teria dentro dela um bloco de media-querie em 360px, outro bloco com 960px etc, ambos com todos os codigos css da pagina.

Ou existe ainda, outro padrão ?

Obrigado.

13
  • Existe um padrão sim, chama-se BOOTSTRAP. Já ouviu falar?
    – LeAndrade
    5/02/2018 às 19:17
  • Nesse caso é um framework, e não quero partir pra essa abordagem, quero aplicar algum padrão ao meu projeto que não seja framework, e pelo que vi na documentação do bootstrap, eles seguem um padrão, unico deles de utilizar mixins pra criar os breackpoints. Mas muito obrigado pela dica. 5/02/2018 às 19:25
  • @Leandro e Bootstrap é padrão de que? Nem o Bootstrap 3 e 4 tem os mesmos valores de Breacking Point nos Media Querie... como que vai ser padrão de alguma coisa. Nem de Bootstrap ele pergunta... tem mais um milhão de Grids por ai, não fiquem presos ao Bootstrap
    – hugocsl
    5/02/2018 às 19:33
  • 2
    Leonardo já que vc está começando, não se prenda a "muletas" aproveite e estude como fazer as coisas na mão primeiro. Metade das perguntas de Bootstrap aqui no site é de gente que da crtl+c e ctrl+v e depois não consegue fazer o que quer pq não tem ideia do que está fazendo. Começa com a base, e não com modelo prontos que vc não entende. É só uma dica se vc pretende levar os estudos a diante.
    – hugocsl
    5/02/2018 às 19:57

2 Respostas 2

1

vou te dar uma resposta baseado no que faço em meus projetos, na verdade eu não especifico um padrão específico de tamanho nas minhas media queries, o que faço é desenvolver um layout o mais fluído possível com ajuda de algumas tecnologias CSS (obrigado flexbox), e nos meus testes, uso um emulador de responsividade, quando o layout alcançar uma determinada largura e meu layout quebra nesse ponto, eu insiro um breakpoint naquela largura, Ex: tenho um slider e em tamanho desktop se comporta normalmente mostrando 3 imagens, quando a largura esta em 320px o slider "quebra" em 3 linhas, introduzo um breakpoint @media all and (max-width: 320px){} e ali coloco as regras para que meu slider fique mostrando apenas uma imagem por vez.

0

OOCSS

Pelo pouco que sei, a convenção do OOCSS (CSS Orientado a Objeto) fala que o melhor é criar um biblioteca com os componentes CSSs separados.

Portanto, de forma exemplar, deveria-se criar uma folha de estilo separada para cada componente de um projeto, como botões, navbar, typografia, etc...

Exemplo gráfico:

root
|
+-- index.html
|
+-- css/main.css; buttons.css; navbar.css; typography.css...
|
+-- js/

Situação fictícia com botões

Dessa maneira, se a tua necessidade fosse aplicar breakpoints (media queries) em botões, criaria-se um arquivo buttons.css que conteria as regras para os variados tamanhos dos botões.

Como ficaria a folha de estilo de um componente para botões:

.btn {
    width: x;
}

    @media only screen and (max-width: 682px;){
        .btn-y {
            width: y;
        }
    }

    @media only screen and (max-width: 960px;){
        .btn-z {
            width: z;
        }
    }

Conclusão

Modularize o seu CSS, de forma que cada componente tenha seu próprio CSS. Assim, dentro de cada folha de estilo utilize os breakpoints relativos ao determinado componente.

Ainda sobre folhas de estilos, perceba que falei sobre OOCSS de forma rasa, por isso recomendo que pesquise sobre o assunto.

Além do mais, não leve em conta o comentário daqueles que falam para usar Bootstrap, afinal, não tem nem relação com sua dúvida.

Ps: Tenho dificuldade de me expressar. Por isso, se ainda tiver dúvida, comenta.

Edit 1: Essa situação que mencionei, só se aplica em fase de desenvolvimento. Portanto, você teria que usar algo como pré-processadores para combinar tudo, ao finalizar o desenvolvimento.

Edit 2: O @hugocsl trouxe este link que explica como se comportar, na hora de publicar.

4
  • Jovem essa metodologia vários CSSs só é valida para ambiente de desenvolvimento, pois facilita a manutenção etc, mas na hora de publicar a prática é minificar tudo em um CSS só, assim se evita um número excessivo de requisições e diminui o tempo de resposta da página. Múltiplos CSSs tb não é boa pratica para sites, assim como o uso de @imports de folhas de estilo. Então o melhor é só um CSS? Não :) essa pergunta é baseada em opiniões ao meu ver. Links css-tricks.com/one-two-three e stackoverflow.com/questions/2336302/…
    – hugocsl
    6/02/2018 às 0:13
  • E só pra falar que eu não sou totalmente contro mais de um CSS a opcão de um CSS para "Above the Fold" e outro para "Under the Fold" é algo que me agrada!
    – hugocsl
    6/02/2018 às 0:15
  • Sim, @hugocsl , não é correto fazer demasiadas requisições. E, como CSS Tricks e você fala, a metodologia pode ser boa somente em ambiente de desenvolvimento (algo que eu não mencionei). No entanto, minha resposta ainda seria correta, se a situação dele é em development? Será que cabe um 'edit' com o link para o CSS Tricks e outro para explicar essa parada de deploy e development?
    – user54824
    6/02/2018 às 0:46
  • Sim jovem, fique a vontade para melhorar a sua resposta, a propósito, nem foi eu que te negativei, só dei minha opinião sobre o assunto...
    – hugocsl
    6/02/2018 às 1:20

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 .