Screendesign | Welche Breite bei der Desktop- und Mobilien-Version?

[liebewinter]

was ich meint mit

...dann mit einem Virtual Tablet und Mobil kanns du selbe der Parameter abgleichen...

sind die CSS Parameter , weil du der PX von dem Gerät hast...

Wie habe meine Css Parametar für meine Desktop geschrieben…

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/


@media (min-width: 1025px) and (max-width: 1280px) {
  
  body {
 
       display: grid;
       display: -ms-grid; 
       background-color: #ebf5d7;
       grid-row-gap: 5px;
       grid-template-columns: 8% 74% 18%;
       grid-template-areas:

         "header   header    header"
         "nav      nav          nav"
         "main main     infoBox"
         "footer   footer   footer";
     
       -ms-grid-columns: 8% 74% 18%;
       -ms-grid-row:  120px 80px 103px 200px 110px 90px; 
       -ms-grid-gap: 5px;
    }
     .dropdown-content a {
       padding: 10px 12px;
   }
    .dropdown:hover .dropdown-content {

      top: 28px; 
    } 
    
}    
    

body > header {
	grid-area: header;
	-ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;

  background-image: url("Bilder/view.JPG");
  background-repeat: no-repeat;
  padding: 65px;
  
  
    
}

body > nav {
	grid-area: nav;
	-ms-grid-column: 1/3;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;

   background-color: #d2f5c4;
   margin: 1px;

}

body > main {
	grid-area: main;
	display: block; 
    -ms-grid-column: 2; 
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    margin: 1px;
    background-color: #eaf6e5;
    box-sizing: border-box;    /* margin wo der test anfang    */  
    padding: 10px;             /* margin wo der test anfang , padding für den margin    */ 
}

body > #furtherInformation {
	grid-area: infoBox;
    -ms-grid-column: 3;
    -ms-grid-column-span: 3;
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
   
    margin: 1px;
    background-color: #d2f3c6;    
}

body > footer {
	grid-area: footer;
	-ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 6;
    -ms-grid-row-span: 6;
    
    background-color: #99ee7a;

}