Respostas interessantes marcadas com a tag

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 */ ...
Randrade's user avatar
  • 21,9mil
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 */ ...
LipESprY's user avatar
  • 4.602
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 @...
hugocsl's user avatar
  • 66,7mil
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 ...
Leon Freire's user avatar
  • 2.423
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, ...
Geferson's user avatar
  • 1.364
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 ...
hugocsl's user avatar
  • 66,7mil
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: ...
BrTkCa's user avatar
  • 11,3mil
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 { ...
Ronison Rodrigues's user avatar
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-...
CianoBarbarossa's user avatar
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ê ...
Diemano Nóbrega's user avatar
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 ...
hugocsl's user avatar
  • 66,7mil
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 { ...
Leandro Angelo's user avatar
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 ...
hugocsl's user avatar
  • 66,7mil
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 ...
Victor Carnaval's user avatar
2 votos

conteúdo responsivo com barra lateral tamanho fixo

article { with: calc(100% - 300px); position: relative; } aside { width: 300px; height: 100%; position: fixed; top: 0; bottom: 0; left: 0; } Caso queira por o aside do lado direito eh trocar o left ...
jonniehenrique's user avatar
2 votos

Media Queries para Java Script - Qual o erro nesta sintaxe?

Creio que se remover o @media all and irá funcionar. var mq = window.matchMedia('(max-width: 768px)'); if (mq.matches) { console.log('menor'); } else { console.log('maior'); } <...
Randrade's user avatar
  • 21,9mil
2 votos
Aceito

Media Queries para Java Script - Qual o erro nesta sintaxe?

O constragimento é originado na1ª linha var mq = window.matchMedia('@media all and (max-width: 768px)'); deverá ser assim.: var mq = window.matchMedia('(max-width: 768px)'); Fonte.:https://...
Tiago Gomes's user avatar
2 votos

Lista horizontal responsiva que se ajusta a 100% de largura da div pai

Bom pelo que percebi da pergunta, o que estás a tentar fazer aqui é criar botões de compartilha para as redes sociais mencionadas na pergunta, e que estes se ajustem a 100% do tamanho total da div pai ...
Chun's user avatar
  • 7.506
2 votos
Aceito

Problema com @media query

Troque esta linha @media screen (min-width:480px){ por: @media screen and (min-width:480px){ EXEMPLO no jsfiddle Atenção que assim os estilos que estiverem definidos em dentro desse media querie ...
Miguel's user avatar
  • 29,4mil
2 votos

É possível fazer isso com table td?

Podes usar o nth-child para esconder as colunas. Seria algo assim: @media only screen and (max-width: 768px) { table td:nth-child(n+3) { display: none; } } @media only screen and (...
Sergio's user avatar
  • 135mil
2 votos
Aceito

Barra de rolagem do navbar não aparece em outra largura

@media (max-width: 991px) { .navbar{ overflow: auto; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px ...
Diego Souza's user avatar
  • 16,7mil
2 votos

Como mudar data-start-height do html por Media Queries?

Pode tentar: $(window).resize(function(){ if ($(window).width() <= 800){ $(".main-slider").attr("data-start-height", 500); }else if($(window).width() <= 600){ $(".main-...
usuario's user avatar
  • 1.441
2 votos

Problema com Media Query

Resumo Vamos supor que a largura da tela do dispositivo tem 667px. As duas media queries serão atendidas. Como a media querie de maior max-width esta depois da de menor max-width ela esta sobrepondo, ...
Roberto de Campos's user avatar
2 votos

CSS para a resolução do Google Pixel 3 XL

O que você procure é Google Pixel 3 XL Pixel Size   1440 x 2960 Viewport     412 x 847 Fonte Uma tabela para te ajudar no futuro Google Pixel 2 XL 1440 x 2880 ...
Wictor Chaves's user avatar
2 votos

Manter imagens em linha mesmo em dispositivos moveis

Você deve usar algum valor leve em consideração a largura da tela e não um valor fixo, nesse caso usei o vw que considera o valor máximo da largura da tela (desconsiderado o tamanho do container), ...
Costamilam's user avatar
  • 10mil
1 voto

Qual é o equivalente ao media queries do CSS em Javascript?

Você pode verificar o tamanho da tela e fazer alterações com css, veja: document.getElementById("demo").innerHTML = "Screen Width: " + screen.width; //tamano da tela var size = screen.width; ...
Wesley S.'s user avatar
1 voto

Problema ao colorir linhas de tabela na impressão usando @media ASP.NET MVC

@media print { } você está usando assim : @@media print { }
Wesley S.'s user avatar
1 voto
Aceito

Como usar Media Queries para sites responsivos baseados nas dimensões dos devices?

Se você quiser servir TODOS os devices seu código vai virar uma loucura e vai ser de impossível manutenção, já que a todo momento pipoca um device novo e que pode ter dimensões novas. Recomendo que ...
Brunno Vianna's user avatar
1 voto

Como colocar o numero da página a ser impressa com CSS no @media print

eu faço assim <style> #rodape::after { content: '| Página ' counter(page); } #rodape { /* string-set: footing content(); */ running: footer; position: fixed; ...
Marcelo Bezerrq's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible