10
votos
Aceito
Qual é o equivalente ao media queries do CSS em Javascript?
Você pode utilizar o Window.matchMedia() para isso. Veja o exemplo abaixo.
if (window.matchMedia("(min-width:800px)").matches) {
/* a viewport tem pelo menos 800 pixels de largura */
...
6
votos
Aceito
Resolução de 176px não compatibiliza com Media Queries
Seguindo a lógica que você usou, nenhuma dessas regras se aplica a uma tela de 176px de largura.
Veja que você usa o min-width. Ou seja, o CSS só será aplicado se a largura for igual ou maior ao ...
6
votos
Como eu trabalho com design responsivo?
Você pode especificar e aplicar conforme a combinação de altura e largura desejado. Exemplo:
@media (min-width: 768px) and (max-width: 979px)
Sinceramente, não é mais fácil utilizar algum framework ...
6
votos
Aceito
Media Queries do CSS não funciona e esta conflitando
Faça assim:
@media (max-width:767px) {
/* de 0px até 767px */
}
@media (min-width:768px) and (max-width: 992px) {
/* de 768px até 992px*/
}
@media (min-width:992px) {
/* acima de 992px */
...
5
votos
Como eu trabalho com design responsivo?
Um conselho, use o Twitter Bootstrap, se você não deseja utilizar todos os componentes dele, você pode customiza-lo e baixar apenas a parte responsiva.
Porém caso você seja um programador Hardcore, ...
5
votos
Media Queries do CSS não funciona e esta conflitando
Cara seu problema é que o min-width sobrescreve o max-width
Veja aqui como está seu CSS
@media(min-width:768px){} /* aqui está "errado" */
@media(max-width:992px){...
Tudo que estiver dentro desse @...
4
votos
Qual a melhor maneira de usar as Media Queries
Na verdade, os dois jeitos estão corretos. não há diferenças de performance ou outra coisa, são apenas filtros diferentes.
Existe os dois, pois caso você queira aplicar o css dentro de um intervalo, ...
4
votos
Como trabalhar com media queries CSS?
Separe as medidas horizontais e vericais de cada elememnto em suas respectivas queries horizontais e verticais:
@media screen and (min-width:1280px)
... aqui voce põe larguras e posições ...
4
votos
Aceito
Como colocar logo na sidebar ou navbar dependendo do tamanho da tela?
O Bootstrap trás uma série de utilitários responsivos para ajudar a lidar com cenários desse género.
Estes utilitários são classes de CSS que visam manipular a apresentação dos elementos com base na ...
4
votos
Aceito
Como eu trabalho com design responsivo?
Para diferenciar uma resolução 1024x600 de uma 1024x768 você pode utilizar uma combinação de Media Queries como o exemplo a seguir:
@media (max-width: 1024px) and (max-height: 768px)
{
//
}
@...
4
votos
Como colocar o numero da página a ser impressa com CSS no @media print
Olá!
Você já deve ter pesquisado o suficiente e encontrado os dois métodos atualmente falhos que estão em todos os cantos da web:
O método usando @page com bottom-right. Link
O método por footer ...
4
votos
Aceito
É seguro utilizar media queries agrupadas?
Bernardo Segue uma dica. Pela orientação W3C seria possível sim usar as @media aninhadas. Como vc pode ver na documentação oficial:
https://www.w3.org/TR/css3-conditional/#processing
Porém para ...
3
votos
Aceito
Media queries não funcionam
media screen serve para Desktop (e nexus) só, está aqui uma lista de todas as media-queries espeficicas que podes usar no entanto, se usares só @media (max-width:NNpx) ela irá funcionar sem grande ...
3
votos
Media queries não funcionam
Já tentou assim @media (max-width:533px) ?
Caso não dê certo, so vendo o estilo completo para poder indicar algo.
3
votos
Media Query para PC
Até onde eu sei, não dá para saber se o usuário está acessando o site através de um desktop usando apenas CSS...você pode alcançar esse resultado usando um pouco de Javascript para detectar o ...
3
votos
Aceito
MediaQueries ignoradas a partir de certa resolução
Seu problema está na ordem das suas regras. Em geral, se duas regras CSS "conflitam" (i.e. ambas se aplicam ao mesmo elemento, com a mesma especificidade, e cada uma delas possui um valor diferente ...
3
votos
Aceito
@media screen não funcionando corretamente
Você não definiu a largura, você definiu a altura, repara:
min-height: 480px
substitua por:
min-width: 480px
que vai rodar perfeitamente.
@media screen and (min-width: 480px){
.logo {
...
3
votos
Barra de rolagem do navbar não aparece em outra largura
Geralmente para "forçar" a barra de rolagem é usado overflow no alvo. Exemplo:
body {
overflow-x: scroll; // somente para horizontal
overflow-y: scroll; // somente para vertical
overflow: ...
3
votos
Aceito
Colunas Bootstrap
Você pode adicionar outros estilos dentro do mesmo elemento para diferentes resoluções de tela. Você pode encontrar na seção Grid Options na documentação do Bootstrap. Vou colocar um exemplo para você ...
3
votos
Aceito
Porque media queries funcionam assim?
Porque "o uso de Media Queries se dá de forma “crescente”, ou seja, primeiro aplicando estilos para dispositivos com resoluções menores".
http://www.princiweb.com.br/blog/front-end/css/breakpoints-e-...
3
votos
Aceito
Media Queries Não funciona Medidas Informadas
Cara como vc está trabalhando com min-width e não com max-width suas regras @media devem começar do valor mais baixo para o valor mais alto. Mas vc fez o contrário...
Essa imagem vai te ajudar a ...
3
votos
Aceito
Manter imagens em linha mesmo em dispositivos moveis
Remova os valores fixos e atribua relativos.
#share-buttons {
width: 100%;
}
#share-buttons a {
width: 18%;
height: 100%;
display: inline-block;
}
#share-buttons img {
...
3
votos
Aceito
Problema com media queries do CSS
Seu @media está bem confuso, não sei se essa resposta vai resolver o problema totalmente, mas espero que te ajudo e entender como vc vai montar suas regras de media querie
Repare que isso
@media ...
3
votos
Aceito
Site pesado por causa de imagens
Primeiro é necessário verificar se o tamanho total dessas imagens se deve a quantidade total ou se estão mal otimizadas.
Além disso, pensando no lado do usuário, vamos supor que esse site de ração ...
2
votos
Media Querie não é compatível com Internet Explorer 2014
Você pode utilizar o Respond.js. Ele é um polifyll para navegadores que não suportam media queries, como o IE. Basta você incluir o arquivo javascript no seu código e tudo irá funcionar perfeitamente. ...
2
votos
Aceito
Design Responsivo
Nesse site tem um resumo sobre o que significa cada propriedade das Medias Querys.
http://tableless.com.br/introducao-sobre-media-queries/
Mas não se preocupe demais com isso.
Agora, o que vem ...
2
votos
Aceito
CSS Media Queries (várias declarações seguidas)
Não existe uma regra padrão, e essa resposta pode até ser baseada em opinião.
Mas você pode separar em arquivos diferentes e utilizar a regra da media no atributo media da tag link:
<link href="...
2
votos
Como fazer imagem ficar acima do texto com media queries
Não é preciso usar o float nesse caso. Eu gosto de usar o display:inline-block que é compatível com várias propriedades CSS.
Fiz apenas um exemplo abaixo. Use a propriedade display com valor inline-...
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
media-queries × 83css × 52
css3 × 23
html × 22
layout-responsivo × 18
html5 × 13
javascript × 9
mobile × 4
jquery × 3
twitter-bootstrap × 3
bootstrap-3 × 3
bootstrap × 3
table × 2
background-image × 2
resolução-de-tela × 2
ajax × 1
aplicação-web × 1
paginação × 1
syntax-error × 1
impressão × 1
responsivo × 1
jquery-mobile × 1
css-hover × 1
hover × 1
nav-bar × 1