How do I work with responsive design?

Navigation
5

I use Media Queries, right, and my layout will have to adapt to various devices like tablets, iphone, smartphones, notebook and TVs, however I found a problem on 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 I use max-width , just remembering that I did "desktop first", soon I will turn it into mobile, but I can not differentiate between them. Both have the same width of 1024 , only height that is different , and there is the problem. Here is the template 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 starting averages that 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 Media Queries for that first resolution 1280x1024 and as soon as I did, the other two stopped working that were 1024x768 e 768x1024 .

    
asked by anonymous 15.04.2015 / 14:31

3 answers

4

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 in another way: 

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

@media screen and (max-width: 1024px) , screen and (max-height: 768px) {
  ...
}
    
15.04.2015 / 15:01
6

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

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

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

    
15.04.2015 / 14:45
5

Advice, use the Twitter Bootstrap , if you do not want to use all its components, you can customize it and just download responsive part .

But if you are a Hardcore programmer, you can do this by using some very peculiar 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 */
}

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

    
15.04.2015 / 14:56
Are objects similar to arrays? Condition within a .each ()