css – How do I work with responsive design?

Question:

I use Media Queries, right, and my layout will have to adapt to different devices such as tablets, iphone, smartphones, notebook and TVs, but I found a problem with the tablet in landscape mode, it has an approximate resolution of 1024x768 , in notebook it would be 1024x600 . I use Media Queries for the correct tablet and use max-width , just remembering that I did "desktop first", soon I'm going to turn it into mobile but I can't differentiate from one to another. The two have the same width of 1024 , only the height is different , and that's the problem. Here's the model I made for the tablet version.

@media (max-width: 1024px){

#menu ul {
        left: 26%;
    }

    .nomes{
        margin-top: 200px;
    }

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

    #header {
        height: 750px;
    }

    video {
        transform:scaley(1.8);
    }

    #bg-video{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -50;
        /*  box-shadow: inset 0px 0px 200px 100px rgba(0,0,0,0.6);*/
    }
    /******************************************************************************
                               Icones
     ******************************************************************************/
    .image.ico {

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

    #fundo-transparente-icones{
        left: -300px;
        top: 70%;
        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;
    }
    /*******************************************************************************
                               Parcerias
    *******************************************************************************/
    #fundo-transparente-parcerias{
        left: -300px;
        top: 257%;
        transform:scale(0.6);
    }
    /*******************************************************************************
                                   Team Speak
     *******************************************************************************/
    #teamspeak-img{
        transform:scale(0.7);
        /*-webkit-filter:grayscale(100%);*/
        z-index: 2000 !important;
    }

    .team.style-team{
        background-repeat: no-repeat;

    }

    .botoes-team input[type="button"],.btn-sobre-team{
        background-color: transparent;
        color: #fff;
        width: 100px;
        height: 50px;
        border:3px solid #fff;
        text-align: center;
        margin-left: -9%;
        margin-top: 10px;   
        border-radius: 6px;
        font-family: Gabriola;
        font-size: 1.7em;
        cursor: pointer;
    }
    .botoes-team input[type="button"]:hover,.btn-sobre-team{
        background-color: #fff !important;
        color: #333 !important;
        transition:0.5s !important;
        cursor: pointer !important;
    }

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

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

Just the basic initial averages I intend to use:

• 1280 x 1024
• 1024 x 768
• 768 x 1024
• 480 x 320
• 1680 x 1050
• 1024 x 600

And I have one more problem, I made the Medias Queries for this first 1280x1024 resolution and as soon as I did, the other two stopped working, which were 1024x768 e 768x1024 .

Answer:

You can specify and apply as per the desired height and width combination. Example:

@media (min-width: 768px) and (max-width: 979px)

Honestly, isn't it easier to use some framework like bootstrap ?