Abzüglich: Wrapper Breite auf verschiedene Bildschirmen zu ändern, basierend auf einer Rinne Variable

Question

Wrapper ohne Polsterung aber mit kleinerem% Breite

Ich bin mit einem kleineren Wrapper statt Klotzen oder Spielraum für eine Website. Dies liegt daran, dass unser Grid-System keine Polsterungen und ähnliches benötigt.

Ich möchte eine Breite basierend auf einer Gossengröße verwenden.

Meine Idee, Beispiel:

Die Gesamtbreite der Umhüllung würde 100% sein Ich möchte 2% Raum um es so ist die Rinne Größe gehen 2% sein Danach habe ich‘ ll tun width: 100% - (2* guttersize); - das ist 2% für jede Seite des Kurses

Wie zu ändern, wenn Bildschirmgröße kleiner ist?

Jetzt möchte ich die Breite ändern, wenn die Bildschirmgröße kleiner wird. Wenn der Bildschirm kleiner wird, mache ich dann etwas wie width: 100% - (4*guttersize);

Wie kann ich das in weniger arbeiten?

ich das jetzt haben:

#responsiveLayout > .set(1200px); 
@media (max-width:1200px) and (min-width:768px){ 
    #responsiveLayout > .set(1200px); 
} 
@media (max-width: 767px) and (min-width:480px) { 
    #responsiveLayout > .set(767px); 
} 
@media (max-width : 479px) { 
    #responsiveLayout > .set(479px); 
} 


#responsiveLayout { 
    .set(@availableW) { 
     @wrapperW : 100%; 
    } 
    .set(@availableW) when (@availableW =< 1200){ 
     @wrapperW : 100% - (@gutter*4); 
     @gutterSize: @gutter*4; 
     .wrapper{ 
      width: @wrapperW; 
     } 
     .menuBar{ 
      padding: 0 @gutter; 
     } 
    } 
    .set(@availableW) when (@availableW =< 767){ 
     @wrapperW : 100% - (@gutter*4); 
     @gutterSize: @gutter*4; 
     .wrapper{ 
      width: @wrapperW; 
     } 
     .menuBar{ 
      padding: 0 @gutter; 
     } 
    } 
    .set(@availableW) when (@availableW =< 479){ 
     @wrapperW : 100% - (@gutter*6); 
     @gutterSize: @gutter*3; 
     .wrapper{ 
      width: @wrapperW; 
     } 
     header{ 
      .wrapper{ 
       width: 100%; 
      } 
     } 
    } 
} 

Es funktioniert ein wenig, aber die CSS wird zu oft überschrieben. Ich dachte über (@availableW = < 799) und (@availableW => 479) aber aus irgendeinem Grund funktioniert das auch nicht.

Irgendwelche Ideen?

Danke!

Answer 1

Wenn ich Ihre Frage richtig zu verstehen, würde ich so etwas wie dies versuchen:

WENIGER:

@screenL:~"screen and (min-width: 1024px)"; 
@screenM:~"screen and (min-width:768px and max-width:1023px)"; 
@screenS:~"screen and (max-width:767px)"; 
@gutter:100px; 
@media @screenS{ 
    .wrapper{ 
     width:@gutter * .98; 
    } 
} 
@media @screenM{ 
    .wrapper{ 
     width:@gutter * .95; 
    } 
} 
@media @screenL{ 
    .wrapper{ 
     width:@gutter * .92; 
    } 
} 

CSS Ausgabe:

@media screen and (max-width:767px) { 
    .wrapper { 
    width: 98px; 
    } 
} 
@media screen and (min-width:768px and max-width:1023px) { 
    .wrapper { 
    width: 95px; 
    } 
} 
@media screen and (min-width: 1024px) { 
    .wrapper { 
    width: 92px; 
    } 
}