means conflict

Question

means conflict

Navigation

#1 by (1 votes)

0

I would like to know why this Media queries :

   @media (max-width:533px),(max-height:853px) {
    #menu ul {
        left: 15px;
    }

    #menu ul li a{

        font-size: 1.2em;
        margin: 4px;
    }
    .setas{
        right: 10%;
    }

    #seta-esquerda{
        transform: scale(1);
        right: 85%;

    }

    #seta-direita{
        transform: scale(1);
        left: 40%;
    }

    video {
        transform:scaley(3.9);
    }

    .nomes{
        font-size: 4.3em;
        margin-top: 200px;
    }

    .texto1 {
        font-size: 1em;
    }

    .image.ico {

        margin: 0 0 1em 0;
        width: 50%;
        margin-left: 175px;
        margin-top: 100px;
    }

    .image.ico img {
        width: 60%;
    }

    .botao-mais input[type="button"],.mais{
        margin-left: 80%; 
    }

    #fundo-transparente-icones{
        position: absolute;
        left: -180px;
        top: 80%;
        transform:scale(0.8);
        z-index: -200;
    }

    .main .jogos-nomes{
        margin-top: 50px;
        font-size: 3.5em;
    }

    .texto-jogos{
        text-align: left;
        font-family: Gabriola;
        font-size: 1em;
        margin-top: 120px;
        margin-left: 40px;
    }



    .main {
        padding: 6em 0 4em 0;
    }



    .main.style2 {
        background-color: #333;
        color:#fff;
        background-size: 100% 100%;
        height: 600px;
        opacity: 0.95;
        border-bottom: 15px solid #f80;
        border-top: 15px solid #f80;

    }

    .main.style2{
        background-repeat: no-repeat;

    }

    .botaozao input[type="button"],.jogos-botao{
        background-color: transparent;
        color: #fff;
        width: 250px;
        height: 50px;
        border:3px solid #fff;
        text-align: center;
        margin-left: 20%;
        margin-top: 30px;   
        border-radius: 6px;
        font-family: Gabriola;
        font-size: 1.7em;

    }

    .botaozao input[type="button"]:hover,.jogos-botao{
        background-color: #fff;
        color: #333;
        transition:0.5s;
    }

}

/*******************************************************************************

                               600x800

********************************************************************************/
@media (min-width:534px) AND (max-width:600px), (max-height:800px){
    #menu ul {
        left: 12%;
    }

    #menu ul li a{

        font-size: 1.2em;
        margin: 4px;
    }
    .setas{
        right: 9%;
    }

    #seta-direita{
        transform: scale(1);
        left: 85%;

    }

    #seta-esquerda{
        transform: scale(1);
        right: 85%;

    }

    .container > p{
        transform: scale(0.9);
    }

    .image.ico {

        margin-left: 35%;
        margin-top: 100px;
    }

    #fundo-transparente-icones{
        left: -300px;
        top: 90%;
        transform:scale(0.6);
    }

    .botao-mais input[type="button"],.mais{
        margin-left: 90%; 
    }

    .texto-jogos{
        margin-top: 20%;
        margin-left: 50px;
    }


    .botaozao input[type="button"],.jogos-botao{
        margin-left: 15%;
        margin-top: 30px;   

    }

    .botaozao input[type="button"]:hover,.jogos-botao{
        background-color: #fff;
        color: #333;
        transition:0.5s;
    }

    #fundo-transparente-parcerias{
        left: -300px;
        top: 330%;
        transform:scale(0.6);
    }

    .linha-team{
        width: 40%;
        margin-top: -10px;
    }
} 


/*******************************************************************************

                              600x1024

   *******************************************************************************/
@media (max-width:600px),(min-height:801px) AND (max-height:1024px){
    #menu ul {
        left: 12%;
    }

    #menu ul li a{
        font-size: 1.2em;
        margin: 4px;
    }

    .setas{
        right: 9%;
    }

    #seta-direita{
        transform: scale(1);
        left: 45%;

    }

    #seta-esquerda{
        transform: scale(1);
        right: 50%;
    }

    .botao-circulo{
        margin-top: 100px;
        margin-left:-15px;
    }

    .nomes{
        margin-top: 20%;
    }

    video {
        transform:scaley(4.1);
    }

    .container > p{
        transform: scale(0.9);
    }

    .image.ico {

        margin-left: 36%;
        margin-top: 100px;
        width: 40%;
    }

    #fundo-transparente-icones{
        left: -300px;
        top: 90%;
        transform:scale(0.6);
    }

    .botao-mais input[type="button"],.mais{
        margin-left: 93%; 
    }

    .jogos-nomes{
        font-size: 4em !important;
    }

    .texto-jogos{

        margin-top: 30%;
        margin-left: 50px;
    }


    .botaozao input[type="button"],.jogos-botao{
        margin-left: 15%;
        margin-top: 30px;   

    }

    .botaozao input[type="button"]:hover,.jogos-botao{
        background-color: #fff;
        color: #333;
        transition:0.5s;
    }

    #fundo-transparente-parcerias{
        left: -300px;
        top: 330%;
        transform:scale(0.6);
    }

    .linha-team{
        width: 40%;
        margin-top: -10px;
    }
}

/*******************************************************************************

                               603x966

  *******************************************************************************/
@media (min-width:601px) AND (max-width:603px){  
    #menu ul {
        left: 12%;
    }

    #menu ul li a{
        font-size: 1.2em;
        margin: 4px;
    }
}

/*******************************************************************************

                               768x1024

  *******************************************************************************/
@media (min-width:604px) AND (max-width:768px){
    #menu ul {
        left: 20%;
    }

    .botao-mais input[type="button"],.mais{
        margin-left: 135%; 
    }

    .jogos-nomes{
        margin-top: 5% !important;
    }

    .texto-jogos{

        margin-top: 15%;
        margin-left: 50px;
    }
}


/*******************************************************************************

                               800x1280

  *******************************************************************************/
@media (min-width:769px) AND (max-width:800px),(min-height:1025px) AND (max-height:1280px){
    #menu ul {
        left: 20%;
    }

    #menu ul li a{
        font-size: 1.2em;
        margin: 4px;
    }

    .setas{
        right: 10%;
    }

    #seta-esquerda{
        transform: scale(0.9);
        right: 85%;

    }

    #seta-direita{
        transform: scale(0.9);
        left: 40%;
    }

    .botao-circulo{
        margin-top: 150px;
        margin-left:-15px;
    }

    video {
        transform:scaley(3.9);
    }

    #bg-video{
        height: 100%;
    }

    .nomes{
        font-size: 4.5em;
        margin-top: 450px;
    }

    .texto1 {
        font-size: 1em;
    }

    .image.ico {
        width: 40%;
        margin-left: 38%;
        margin-top: 100px;
    }

    .image.ico img {
        width: 60%;
    }

    .botao-mais input[type="button"],.mais{
        margin-left: 150%; 
    }

    #fundo-transparente-icones{
        position: absolute;
        left: -180px;
        top: 80%;
        transform:scale(0.8);
        z-index: -200;
    }


    .jogos-nomes{
        margin-top: 5% !important;
    }

    .texto-jogos{

        margin-top: 15%;
        margin-left: 50px;
    }
}

Conflicting with this:

@media screen and (min-width: 1024px) , screen and (min-height: 600px){

    #menu ul {
        left: 26%;
    }
    .nomes{
        margin-top: 200px;
    }

    .botao-circulo{
        margin-top: 50px;
        margin-left:-15px;
    }

    #header {
        height: 100%;
    }

    video {
        transform:scaley(1.8);
    }


    #bg-video{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -50;

    }

    .image.ico {

        margin-left: 70px;
        margin-top: 100px;
    }

    #fundo-transparente-icones{
        left: -300px;
        top: 90%;
        transform:scale(0.6);
    }

    .botao-mais input[type="button"],.mais{
        margin-left: 175%; 
    }

    .texto-jogos{
        margin-top: 200px;
        margin-left: 50px;
    }


    .botaozao input[type="button"],.jogos-botao{
        margin-left: 15%;
        margin-top: 30px;   

    }

    .botaozao input[type="button"]:hover,.jogos-botao{
        background-color: #fff;
        color: #333;
        transition:0.5s;
    }

    #fundo-transparente-parcerias{
        left: -300px;
        top: 330%;
        transform:scale(0.6);
    }

    .linha-team{
        width: 40%;
        margin-top: -10px;
    }



    #footer .copyright {
        left: 38%;
    }
}


@media screen and(min-width:1024px),screen and(min-height: 768px){
    #fundo-transparente-parcerias{
        left: -300px;
        top: 250%;
        transform:scale(0.6);
    }

    #fundo-transparente-icones{
        left: -300px;
        top: 65%;
        transform:scale(0.6);
    }

}


@media screen and (min-width:1280px),screen and(min-height: 800px){
    /*    #fundo-transparente-icones{
            left: -180px;
            top: 85%;
            transform:scale(0.7);
        }

         #fundo-transparente-parcerias{
            left: -180px;
            top: 265%;
            transform:scale(0.7);
        }*/

}


@media screen and (min-width:1366px),screen and(min-height: 768px){
    /*    #fundo-transparente-icones{
            left: -180px;
            top: 90%;
            transform:scale(0.7);
        }

         #fundo-transparente-parcerias{
            left: -180px;
            top: 275%;
            transform:scale(0.7);
        }*/

    .setas{
        left: 34%;
    }

}


@media screen and (min-width:1440px),screen and(min-height: 900px){
    #menu ul {
        left: 26%;
    } 
}


@media screen and (min-width:1600px),screen and(min-height: 900px){
    #menu ul {
        left: 32%;
    } 

    .setas{
        position: absolute;
        top: 60px;
        left: 40%;
    }
}


@media screen and (max-width:1680px),screen and(max-height: 1050px){
    .botaozao input[type="button"],.jogos-botao{
        margin-left: 15%;
    }
}


@media screen and (min-width:1920px),screen and(min-height: 1080px){


    #menu ul {
        left: 40%;
    }

    .setas{
        left: 46% !important;
    }

    #seta-esquerda{
       right: 80%;
    }

    #seta-direita{
        left: 20%;
    }


    .nomes{
        font-size: 7em;
        margin-top: 400px;
        margin-left: 200px;
    }

    .texto1{
        margin-left:10%;
    }

    .botao-circulo{
        margin-top: 80px;
        margin-left:55px;
    }



    .botaozao input[type="button"],.jogos-botao{
        margin-left: 13%;
    }

    #bg-video{
        width: 100%;
    }

    video {
        transform:scaleY(1.5);

    }


    .image.ico {
        width: 90%;
        margin-left: 70px;
        margin-top: 100px;
    }

    #fundo-transparente-icones{
        left: -300px;
        top: 90%;
        transform:scale(0.6);
    }

    .botao-mais input[type="button"],.mais{
        margin-left: 190%; 
    }

    .jogos-nomes{
        margin-top: 8% !important;
    }

    .texto-jogos{
        margin-top: 250px;
        margin-left: 90px;
    }


    .botaozao input[type="button"],.jogos-botao{
        margin-left: 15%;
        margin-top: 30px;   

    }

    .main.style2 {
        height: 800px;
    }

    #fundo-transparente-parcerias{
        left: -300px;
        top: 330%;
        transform:scale(0.6);
    }

    .linha-team{
        width: 40%;
        margin-top: -10px;
    }



    #footer .copyright {
        left: 38%;
    }
}

@media screen and (min-width:1920px),screen and(min-height: 1200px){
    .botaozao input[type="button"],.jogos-botao{
        margin-left: 13%;
    }

    #bg-video{
        width: 100%;
    }

    .setas{
        left: 18%;
    }
}

I can not understand why these measures are conflicting and when I start to put more measures they will clutter and already be able to do the desktop measurements and with the lower values as these two example they give conflict between them. >

these are my css links:

 <link rel="stylesheet" href="css/responsivo/tablet.css" media="screen"/>
 <link rel="stylesheet" href="css/responsivo/desktop.css" media="screen"/>

media-queries

asked by anonymous 22.04.2015 / 19:06

1 answer

Dynamically increase height and width auto Display links in sql query

score 1 · Accepted Answer

The expression max-width means that the width must be less than or equal to the specified value. The same goes for height, max-height .

So you're saying:

Apply the rule for when the screen has maximum width of 533px or maximum height 835px

@media (max-width:533px),(max-height:853px)  {/*...*/}

And apply the rule to when the screen has maximum width of 600px or maximum height of 800px

@media (max-width:600px), (max-height:800px){/*...*/}

So if the screen has width 500px , which is less than 533px and less than 600px or width 768px that is less than 835px and 800px . In other words, it is true for the two rules, then the LAST will prevail, because that is how it works for CSS, unless you use !important or the selector is more specific.

To avoid this kind of thing, use "isolated" rules:

@media (max-width:533px),(min-height: 801px) and (max-height:853px)  {/*...*/}

@media (min-width:534px) AND (max-width:600px), (max-height:800px){/*...*/}

For more details check mozilla documentation , which is very complete , but in English. (I hope this is not a problem.)