Wie ändere ich die Ränder basierend auf der Breite des Bildschirms?

Ich habe diesen HTML- und CSS-Code für eine Webseite. Ich versuche, die Website für Mobilgeräte zu optimieren und passt sie an die Größe des angezeigten Bildschirms an. Ich möchte, dass die Ränder bei Betrachtung auf einem schmalen Bildschirm wie bei einem Smartphone sehr klein werden und sich nach und nach anpassen, wenn der Bildschirm größer und die Ränder größer und größer werden, bis ein Vollbild von beispielsweise einem Desktopcomputer angezeigt wird. Dieser Code funktioniert jedoch nicht wirklich. (Ich habe umfassen nicht alle anderen CSS Teile dieses Codes, aber bitte danach fragen, wenn nötig!)Wie ändere ich die Ränder basierend auf der Breite des Bildschirms?

Mein Versuch, Margen, um die Größe aufgrund der Breite des Bildschirms:

 @media (max-width: 1100px, min-width: 800px) { 
      body { 
       margin-right: 20px; 
       margin-left: 20px; 
      } 

     @media (max-width: 750px, min-width: 501) { 
      body { 
       margin-right: 5vw; 
       margin-left: 5vw; 
      } 
     } 
     @media (max-width: 500px) { 
      body { 
       margin-right: 2vw; 
       margin-left: 2vw; 
      } 
     } 
    </style> 
</head> 
<body> 
    <header> 

     <h1>Blog</h1> 
     <ul> <!-- Menu Tabs --> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Art</a></li> 
      <li><a href="#">Music</a></li> 
     </ul> 
    </header> 
</body>

Danke, ich würde wirklich Ihre Hilfe zu schätzen wissen!

Quelle

2016-07-03 user6544696

Führen Sie Ihre CSS obwohl eine CSS-Syntax-Checker oder Linter. –

Ihnen fehlt eine schließende Klammer um Ihre erste Medienabfrage. Außerdem haben Sie einige zusätzliche Bits in Ihren Medienabfragen, die sie ungültig machen. Die Art und Weise, wie Medienabfragen funktionieren, macht die min-width Teile, die Sie hinzufügen wollten, unnötig. Der folgende Code erstellt auf großen Bildschirmen einen linken/rechten Rand 20px. Wenn der Schwellenwert von 750px erreicht wird, tritt 5vw ein und so weiter.

/* Invalid: 
    @media (max-width: 1100px, min-width: 800px) 
*/ 

@media (max-width: 1100px) { 
    body { 
    margin-right: 20px; 
    margin-left: 20px; 
    } 
} 

@media (max-width: 750px) { 
    body { 
    margin-right: 5vw; 
    margin-left: 5vw; 
    } 
} 

@media (max-width: 500px) { 
    body { 
    margin-right: 2vw; 
    margin-left: 2vw; 
    } 
}

Wenn Ihre Absicht mit einem Standard zu starten ist 20px rechtser/linker Rand, für Bildschirme noch größer als 1100px, könnten Sie einen Standard-Marge in Ihrem CSS erstellen, die von Ihrer Medienabfrage Regeln außer Kraft gesetzt werden. Dann können Sie Ihre Medienabfragen mit einer kleineren Bildschirmgröße beginnen.

/* default size */ 
body { 
    margin-left: 20px; 
    margin-rights: 20px; 
} 

@media (max-width: 750px) { 
    body { 
    margin-right: 5vw; 
    margin-left: 5vw; 
    } 
} 

@media (max-width: 500px) { 
    body { 
    margin-right: 2vw; 
    margin-left: 2vw; 
    } 
}

https://jsfiddle.net/5vez3rdc/

Quelle

2016-07-03 19:23:29

Was hast du geändert? –

Ich entfernte die ', min-width' Bits, da sie irrelevant sind. –

Was war los mit ihnen und wenn er sie aus irgendeinem Grund behalten wollte, wie sollte er sie reparieren? –

Wie ändere ich die Ränder basierend auf der Breite des Bildschirms?

Antwort

Verwandte Themen