Media queries

deehhalves · Agosto 31, 2015

Há algum problema em ter várias delas [media queries] em meu código? Toda vez que vou desenvolver um projeto novo, encho de media queries em meu css e isso fica visualmente feio. Há algum problema?

pmmartinelli · Agosto 31, 2015

Desde que os valores nas diversas Media Queries não conflitem, não há problema.

Considerando várias media queries, normalmente vemos configurações que definem resoluções mínimas e máximas, tipos de output, etc...

Com várias media queries as vezes é normal que estes valores conflitem deixando lacunas e distorcendo a apresentação do site quando a resolução atingir estas lacunas.

Este é basicamente o único cuidado que deve tomar.

Porém recomendo que, por organização e também boa prática, defina até 5 breakpoints para suas media queries. Mais que isso talvez seja desnecessário e difícil de organizar.

Segue um link interessante:

http://www.princiweb.com.br/blog/front-end/css/breakpoints-e-logica-em-media-queries.html

Divirta-se!

deehhalves · Setembro 1, 2015

"...não conflitem, não há problema."

O que seria eles conflitarem?

Esse é o topo que estou fazendo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
	<div class="topo_container" style="padding-bottom: 25px;">
        <div class="container" style="padding-top: 10px;">
            <div class="col-md-4">
				<p class="rua_topo"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>   Rua Horácio Rubini, 1000, Barra do Rio Cerro</p>
			</div>
			<!--<hr id="hr_left">-->
            <div id="right_topo">
            
            	<p>
            		<img class="img_telefone" src="icon_telefone.png">
                	(47) 3376-0105
                    	   
                          

                    <img class="img_satisfacao" src="smile.png">
                    Pesquisa de Satisfação

				</p>
                
				<div class="social_icons">
					 <ul class="soc">
                        <li><a class="soc-facebook" href="#"></a></li>
                        <li><a class="soc-instagram soc-icon-last" href="#"></a></li>
              	 	 </ul>
				</div>
            </div> 
            
             <nav id="navbar_right">
    			<ul>
                    <li><a href="#" id="item_menu">Reservas</a></li>
                    <li><a href="#" id="item_menu">Social</a></li>
                    <li><a href="#" id="item_menu">Prime Club</a></li>
                    <li><a href="#" id="item_menu">Contato</a></li>
				</ul>
			</nav>
            
			<nav id="navbar_left">
    			<ul>
                    <li><a href="#" id="item_menu">Sobre</a></li>
                    <li><a href="#" id="item_menu">Suítes</a></li>
                    <li><a href="#" id="item_menu">Gastronomia</a></li>
                    <li><a href="#" id="item_menu">Serviços</a></li>
				</ul>
			</nav>
            <div>
            	<img src="logo_topo.png" id="logo_topo">
            </div>
        </div><!--- container --->
    </div><!--- topo_container --->
    		<img src="teste.png" style="width: 100%;">
</body>
</html>

*/ -------- css ------- */

@charset "UTF-8";
/* CSS Document */
/* ------ SOCIAL ICON -------*/

@font-face {
    font-family: 'si';
    src: url('socicon-1.3/socicon.eot');
    src: url('socicon-1.3/socicon.eot?#iefix') format('embedded-opentype'),
         url('socicon-1.3/socicon.woff') format('woff'),
         url('socicon-1.3/socicon.ttf') format('truetype'),
         url('socicon-1.3/socicon.svg#icomoonregular') format('svg');
    font-weight: normal;
    font-style: normal;
 
}
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family:si;
        src: url(PATH_TO/socicon.svg) format(svg);
    }
}

.soc {
    overflow:hidden;
    margin:0; padding:0;
    list-style:none;
}

.soc li {
    display:inline-block;
    *display:inline;
    zoom:1;
}

.soc li a {
    font-family:si!important;
    font-style:normal;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;

    -o-transition:.1s;
    -ms-transition:.1s;
    -moz-transition:.1s;
    -webkit-transition:.1s;
    transition:.1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    overflow:hidden;
    text-decoration:none;
    text-align:center;
    display:block;
    position: relative;
    z-index: 1;
    width: 20px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-right: 10px;
    color: #000000;
    background-color: #ffffff;
}

.soc-icon-last{
    margin:0 !important;
}

.soc-facebook:before {
    content:'b';
}
.soc-instagram:before {
    content:'x';
}



/* --------------- TOPO ------------*/
hr {
    width: 788px;
	float: left;
	border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

@media (max-width: 1200px) {
	.rua_topo {
		;	
	}
}

@media (max-width: 1110px) {
	.rua_topo {
		;		
	}
}

@media (max-width: 1020px) {
	.rua_topo {
		;
		font-size: 13px;		
	}
}

@media (max-width: 992px) {
	.rua_topo {
		font-size: 11px;	
		;	
	}
}	

#navbar_left ul {
	float: left;
	;
	margin-top: 63px;
	font-size: 16px;
}

@media (max-width: 1200px) {
	#navbar_left ul {
		;
	}
}

@media (max-width: 1110px) {
	#navbar_left ul {
		margin-right: -377px;		
	}
}

@media (max-width: 1020px) {
	#navbar_left ul {
		;		
	}
}

@media (max-width: 992px) {
	#navbar_left ul {
		font-size: 15px;
		;	
		margin-top: 34px;	
	}
}

#navbar_left ul li {
	display: inline;
	padding: 0px 20px;	
}

@media (max-width: 1200px) {
	#navbar_left ul li {
		padding: 0px 10px;	
	}
}

@media (max-width: 1020px) {
	#navbar_left ul li {
		padding: 0px 8px;	
	}
}

#navbar_right ul {
	float: right;
	margin-right: -428px;
	margin-top: 63px;
	font-size: 16px;
}

@media (max-width: 1200px) {
	#navbar_right ul {
		margin-right: -385px;
	}
}

@media (max-width: 1110px) {
	#navbar_right ul {
		margin-right: -370px;		
	}
}

@media (max-width: 1020px) {
	#navbar_right ul {
		margin-right: -346px;		
	}
}

@media (max-width: 992px) {
	#navbar_right ul {
		margin-right: -319px;
		font-size: 15px;	
		margin-top: 35px;
	}
}

#navbar_right ul li { 
	display: inline; 
	padding: 0px 20px;
}

@media (max-width: 1200px) {
	#navbar_right ul li {
		padding: 0px 11px;
	}
}

@media (max-width: 1020px) {
	#navbar_right ul li {
		padding: 0px 8px;
	}
}

#logo_topo {
	margin-left: 35px;
    width: 184px;
}

@media (max-width: 1200px) {
	#logo_topo {
		margin-right: 20px;
		float: right;	
		width: 154px;
	}
}

@media (max-width: 1110px) {
	#logo_topo {
		margin-right: 19px;
		width: 153px;
	}
}

@media (max-width: 1020px) {
	#logo_topo {
		width: 130px;
		margin-right: 4px;
		padding: 2px;		
	}
}

@media (max-width: 992px) {
	#logo_topo {
		width: 166px;
		margin-top: -25px;
	}	
}	

#right_topo {
	float: right;
	margin-right: 132px;	
}

@media (max-width: 1200px) {
	#right_topo {
		margin-right: 55px;	
	}
}

@media (max-width: 1110px) {
	#right_topo {
		margin-right: 45px;		
	}
}

@media (max-width: 1020px) {
	#right_topo {
		margin-right: 76px;	
	}
}

@media (max-width: 992px) {
	#right_topo {
		font-size: 11px;	
		margin-top: -24px;	
		margin-right: -26px;
	}
}

.social_icons {
	float: right;
    margin-top: -40px;
    margin-right: -119px;
}

@media (max-width: 1200px) {
	.social_icons {
		margin-right: -76px;	
	}
}

.img_telefone {
	width: 31px;
	padding-right: 9px;	
}

.img_satisfacao {
	width: 32px;	
	padding-right: 9px;	
}

Compile esse código e veja. Sei que tem bastante coisa errada nas medias, mas é errando que se aprende. (Estou em um iMac de 1920x1080);

pmmartinelli · Setembro 1, 2015

digamos que um media está sendo aplicado nas resoluções de min-width: 300px e max-width: 850px

e o outro está sendo aplicado em max-width > 900px

Com este cálculo ficou uma lacuna de 50px na resolução, na qual nenhuma das 2 configs estará aplicada.

Ou ainda 2 medias possuem medidas que se sobrepõem em pixels ... pode ser que a configuração que prevalecerá não será a que deseja.

Tudo é uma questão de organizar e, de preferência, documentar.

Divirta-se!

deehhalves · Setembro 1, 2015

O espaço em branco eu entendi perfeitamente. Mas como posso resolver esse defeito?

pmmartinelli · Setembro 1, 2015

Vi que você está criando um Media para cada combinação de breakpoints + resolução... e isto está duplicando os media ... é desnecessário.

Pelo que vi você só precisa de 4 breakpoints, que são estes abaixo.

Dentro de cada um dele você vai colocar TODAS as classes necessárias para aquele breakpoint, conforme exemplo abaixo.

@media (max-width: 992px) {
   /* Aqui vai SEMPRE todas as configurações para este breakpoint */
}

@media (max-width: 1020px) {
    /* Aqui vai SEMPRE todas as configurações para este breakpoint */
}

@media (max-width: 1200px) {
     /* Aqui vai SEMPRE todas as configurações para este breakpoint */
}

@media (max-width: 1110px) {
     /* Aqui vai SEMPRE todas as configurações para este breakpoint */
}

Exemplo:

@media (max-width: 992px) {
   #right_topo {
        font-size: 11px;    
        margin-top: -24px;    
        margin-right: -26px;
    }
   #logo_topo {
        width: 166px;
        margin-top: -25px;
    }
   #navbar_right ul {
        margin-right: -319px;
        font-size: 15px;    
        margin-top: 35px;
    }
}

Espero que tenha ajudado.

Divirta-se!

deehhalves · Setembro 1, 2015

Entendi sim. Muito obrigado cara. Sua resposta foi muito útil.

Entrar

Arquivado

Media queries

Recommended Posts

deehhalves 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pmmartinelli 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

deehhalves 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pmmartinelli 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

deehhalves 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pmmartinelli 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

deehhalves 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante