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
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
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
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
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
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
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
@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
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
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
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
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 ...
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');
}
<...
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://...
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 ...
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 ...
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 (...
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 ...
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-...
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, ...
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 ...
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), ...
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;
...
1
voto
Problema ao colorir linhas de tabela na impressão usando @media ASP.NET MVC
@media print
{
}
você está usando assim :
@@media print
{
}
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 ...
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;
...
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
media-queries × 83css × 53
css3 × 23
html × 22
layout-responsivo × 17
html5 × 13
javascript × 8
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
div × 1
flask × 1
paginação × 1
float × 1
syntax-error × 1
impressão × 1
responsivo × 1
jquery-mobile × 1