Perguntas com a marcação «media-queries»

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 > height) { ... …

159 browser  css  tablet  media-queries 

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 …

141 css  media-queries 

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)) { }

140 css  media-queries  css-variables 

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 …

132 iphone  css  responsive-design  media-queries  iphone-5 

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) { /* ... */ } …

128 javascript  css  media-queries 

Qual é a maneira mais segura, usando consultas de mídia, de fazer algo acontecer quando não estiver em um dispositivo com tela de toque? Se não houver maneira, você sugere usar uma solução JavaScript como !window.TouchModernizr ou?

122 css  touch  media-queries 

Estou tentando combinar o uso de uma variável Sass com consultas @media da seguinte maneira: $base_width:1160px; @media screen and (max-width: 1170px) {$base_width: 960px;} @media screen and (min-width: 1171px) {$base_width: 1160px;} $base_width é então definido em vários pontos nas medidas baseadas em porcentagem da largura da folha de estilo para produzir …

120 sass  media-queries 

Isso pode soar como uma pergunta boba. Se eu usar este snippet CSS para monitores regulares (onde box-bg.pngé 200px por 200px); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } e se eu usar uma consulta de mídia como esta para visar telas de retina (com a imagem @ 2x sendo …

102 css  responsive-design  media-queries 

Por algum motivo, o modo de emulação de dispositivo não está lendo minhas consultas de mídia. Funciona em outros sites, incluindo meus próprios sites que fiz com bootstrap, mas não está funcionando em consultas de mídia que estou usando do zero (clicar no botão de consultas de mídia torna o …

94 css  google-chrome  media-queries  developer-tools 

EDITADO: Talvez eu deva perguntar qual seletor configura o padding lateral quando a tela é reduzida para menos de 480px de largura? Eu tenho navegado bootstrap-responsiveness.css por um tempo para localizar isso, mas nada parece afetar isso. Original , basicamente, desejo remover qualquer preenchimento padrão ou margem definida para capacidade …

89 css  twitter-bootstrap  responsive-design  media-queries 

Como espaçamos as consultas de mídia com precisão para evitar sobreposições? Por exemplo, se considerarmos o código: @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } O …

88 css  responsive-design  media-queries 

Eu tenho uma classe de item e uma classe "modificadora" compacta: .item { ... } .item.compact { /* styles to make .item smaller */ } Isto é bom. No entanto, gostaria de adicionar uma @mediaconsulta que force a .itemclasse a ser compacta quando a tela é pequena o suficiente. À …

86 css  sass  media-queries 

Desde o Bootstrap 3 não há mais arquivos separados para folhas de estilo responsivas e padrão. Então, como posso remover facilmente os recursos responsivos?

85 twitter-bootstrap  responsive-design  media-queries  twitter-bootstrap-3