How do I work with responsive design?

Question

I use Media Queries, right, and my layout will have to adapt to various devices like tablets, iphone, smartphones, notebook and Tvs, but I found a problem in the tablet in landscape mode, it has an approximate resolution of 1024x768, notebook would be 1024x600. I use Media Queries for the correct tablet and use the max-width, just remembering that I did "desktop first", soon I will transform it into mobile only I can not differentiate from one to another. Both has the even width of 1024, only the height that is different, and there’s the problem. Follow 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%;
    }    
}

Only the basic initial medias 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 resolution 1280x1024 and as soon as I did, the other two stopped working which were the 1024x768 e 768x1024.

Answer 1

You can specify and apply according to the desired height and width combination. Example:

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

Honestly, it is not easier to use some framework like bootstrap ?

Answer 2

A piece of advice, use the Twitter Bootstrap, if you do not want to use all of its components, you can customize it and download only the responsive part.

But if you are a programmer Hardcore, can do this using some quite peculiar properties of media queries.

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

---

Attention, with the (min|max)-device-(width|height) you are picking up the device resolution, and many devices have different pixel resolution and density. I advise you to study the resolutions and densities of the devices you want to work with.

Answer 3

To differentiate a 1024x600 resolution from a 1024x768 you can use a combination of Media Queries as the following example:

@media (max-width: 1024px) and (max-height: 768px)
{
    //
}
@media (max-width: 1024px) and (max-height: 600px)
{
    //
}

and otherwise:

@media screen and (max-width: 1024px) , screen and (max-height: 600px) {
  ...
}

@media screen and (max-width: 1024px) , screen and (max-height: 768px) {
  ...
}