Articles of media queries

Obtenha a largura do dispositivo em javascript

Existe uma maneira de obter a largura do dispositivo de usuários, em oposição à largura da porta de visualização, usando javascript? Consultas de mídia CSS oferecem isso, como posso dizer @media screen and (max-width:640px) { /* … */ } e @media screen and (max-device-width:960px) { /* … */ } Isso é útil quando estou segmentando […]

Consulta de mídia para detectar se o dispositivo é touchscreen

Qual é a maneira mais segura, usando consultas de mídia, para fazer algo acontecer quando não está em um dispositivo touchscreen? Se não houver nenhuma maneira, sugira usar uma solução JavaScript como !window.Touch ou Modernizr?

Por que a ordem das consultas de mídia é importante no CSS?

Ultimamente, venho projetando sites que são mais responsivos e tenho usado consultas de mídia CSS com frequência. Um padrão que notei é que a ordem em que as consultas de mídia são definidas realmente importa. Não testei em todos os navegadores, mas apenas no Chrome. Existe uma explicação para esse comportamento? Às vezes, é frustrante […]

Aninhando regras @media em CSS

O suporte parece ser diferente entre os navegadores. Verifique o link Firefox: preto com texto branco. Opera, Chrome, IE9: azul com texto em preto. O que é correto e como eu faria isso consistente? O código @media screen and (min-width: 480px) { body{ background-color:#6aa6cc; color:#000; } @media screen and (min-width: 768px) { body{ background-color:#000; color:#fff; […]

Pontos de interrupção comuns para consultas de mídia em um site responsivo

Por isso, estou trabalhando em meu primeiro site responsivo, que faz uso extensivo de consultas de mídia. Eu queria saber se há algumas larguras de página comuns que eu deveria otimizar para. Eu provavelmente terei uma largura máxima (não indo todo o fluido) Eu estou pensando que eu vou ter talvez 3-5 larguras com pequenas […]

$ (window) .width () não é o mesmo que query de mídia

Eu estou usando o Twitter Bootstrap em um projeto. Bem como os estilos de bootstrap padrão eu também adicionei alguns dos meus próprios //My styles @media (max-width: 767px) { //CSS here } Também estou usando o jQuery para alterar a ordem de determinados elementos na página quando a largura da viewport é menor que 767px. […]

consulta de mídia CSS do iPhone 5

O iPhone 5 tem uma canvas mais longa e não está captando a visão móvel do site. Quais são as novas consultas de design responsivo para o iPhone 5 e posso combinar com as consultas do iPhone existentes? Minha consulta de mídia atual é esta: @media only screen and (max-device-width: 480px) {}

CSS @media print issues com background-color;

Eu sou novo aqui nesta empresa e temos um produto que usa milhas de css. Eu estou tentando fazer uma folha de estilo imprimível para o nosso aplicativo, mas eu estou tendo problemas com a cor de fundo em @media print … @media print { #header{display:none;} #adwrapper{display:none;} td {border-bottom: solid; border-right: solid; background-color: #c0c0c0;}} todo […]

Consultas de mídia CSS: max-width OR max-height

Ao escrever uma consulta de mídia CSS, existe alguma maneira de especificar várias condições com lógica “OR”? Eu estou tentando fazer algo assim: /* This doesn’t work */ @media screen and (max-width: 995px OR max-height: 700px) { … }

Qual é a diferença entre “canvas” e “somente canvas” nas consultas de mídia?

Qual é a diferença entre “canvas” e “somente canvas” nas consultas de mídia? Por que somos obrigados a usar ‘ Only ‘. A screen não fornece informações suficientes para ser renderizada apenas para o Screen? Eu vi muitos sites responsivos. Alguns usam @media screen and (max-width:632px) Alguns @media (max-width:632px) e alguns @media only screen and […]