As consultas de mídia permitem a aplicação condicional de estilos CSS com base nos tipos de mídia, como tela e impressão, e nas condições dos recursos de mídia, como janela de visualização e altura e largura do dispositivo. Eles fazem parte da especificação W3C CSS3.
Ao escrever uma consulta de mídia CSS, existe alguma maneira de especificar várias condições com a lógica "OU"? Estou tentando fazer algo assim: /* This doesn't work */ @media screen and (max-width: 995px OR max-height: 700px) {
Qual é a diferença entre screene only screennas consultas de mídia? <link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> Por que somos obrigados a usar only screen?...
Venho pesquisando pesquisas sobre mídia e ainda não entendo como segmentar dispositivos de determinados tamanhos. Quero poder segmentar computadores, tablets e dispositivos móveis. Eu sei que haverá algumas discrepâncias, mas seria bom ter um sistema genérico que possa ser usado para direcionar...
Estou usando o Bootstrap 3 para criar um layout responsivo onde desejo ajustar alguns tamanhos de fonte de acordo com o tamanho da tela. Como posso usar consultas de mídia para criar esse tipo de
Eu gostaria de usar consultas de mídia para redimensionar elementos com base no tamanho de um divelemento em que estão. Não posso usar o tamanho da tela, pois ele divé usado apenas como um widget na página da Web, e seu tamanho pode variar. Atualizar Parece que há trabalho sendo feito sobre isso...
Preciso carregar dinamicamente imagens de banner em um aplicativo HTML5 e gostaria de duas versões diferentes para se adequar às larguras da tela. Como não consigo determinar corretamente a largura da tela do telefone, a única maneira de pensar nisso é adicionar imagens de plano de fundo de uma div...
Encontrei esse pedaço de código em um arquivo CSS que herdei, mas não consigo entender nada: @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } Especificamente, o que está acontecendo na primeira
Preciso desenvolver algumas páginas html para telefones iphone / android, mas qual é a diferença entre max-device-widthe max-width? Eu preciso usar css diferentes para diferentes tamanhos de tela. @media all and (max-device-width: 400px) @media all and (max-width: 400px) Qual é a...
Eu tenho esta @mediaconfiguração: HTML : <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS : @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /*...
Eu tenho um site grande que é executado no ASP.NET MVC usando o mecanismo de exibição Razor. Eu tenho uma folha de estilo base que contém todo o estilo genérico para todo o site. Na ocasião, no entanto, tenho estilos específicos de página que na <head>página - geralmente são uma ou duas...
Estou usando o Twitter Bootstrap em um projeto. Além dos estilos de inicialização padrão, também adicionei alguns dos meus //My styles @media (max-width: 767px) { //CSS here } Também estou usando o jQuery para alterar a ordem de certos elementos na página quando a largura da janela de exibição é...
No styles.css, estou usando consultas de mídia, as quais usam uma variação de: /*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) { /*--[ Mobile styles go here]---------------------------*/ } Os sites são redimensionados para o layout que...
O IE8 não suporta a seguinte consulta de mídia CSS: @import url("desktop.css") screen and (min-width: 768px); Caso contrário, qual é a maneira alternativa de escrever? O mesmo funciona bem no Firefox. Algum problema com o código abaixo? @import url("desktop.css") screen; @import...
Eu sou novo aqui nesta empresa e temos um produto que usa quilômetros de css. Eu estou tentando fazer uma folha de estilo de impressão para a nossa aplicação, mas estou tendo problemas com background-colorno @media print. @media print { #header{display:none;} #adwrapper{display:none;} td {...
Na documentação do Bootstrap 3, a mídia consulta : Usamos as seguintes consultas de mídia em nossos arquivos Menos para criar os principais pontos de interrupção em nosso sistema de grade. Dispositivos pequenos demais (telefones com menos de 768px): Nenhuma consulta de mídia, pois esse é o...
No JavaScript, o modo de orientação pode ser detectado usando: if (window.innerHeight > window.innerWidth) { portrait = true; } else { portrait = false; } No entanto, existe uma maneira de detectar a orientação usando apenas CSS? Por exemplo. algo como: @media only screen and (width >...
Estou tentando usar consultas de mídia CSS3 para criar uma classe que só aparece quando a largura é maior que 400px e menor que 900px. Sei que isso é provavelmente extremamente simples e estou perdendo algo óbvio, mas não consigo descobrir. O que eu vim com o código abaixo, agradeço qualquer...
Eu estou tentando usar variáveis CSS na consulta de mídia e ele não funciona. :root { --mobile-breakpoint: 642px; } @media (max-width: var(--mobile-breakpoint))
O iPhone 5 tem uma tela mais longa e não está capturando a visualização móvel do meu site. Quais são as novas consultas de design responsivo para o iPhone 5 e posso combinar com as consultas existentes do iPhone? Minha consulta de mídia atual é esta: @media only screen and (max-device-width:...
Existe uma maneira de obter a largura do dispositivo dos usuários, em oposição à largura da porta de visualização, usando javascript? As consultas de mídia CSS oferecem isso, como posso dizer @media screen and (max-width:640px) { /* ... */ } e @media screen and (max-device-width:960px) { /*...