Medienabfragen für mehrere Elemente

Question

Neu bei Medienabfragen. Aber ich denke, ich habe das Boot irgendwo vermisst.

Angenommen, ich habe eine topBar wie die im unten stehenden Snippit, die aus einem topBar-Container, einer festen Breite und einer Liste besteht, und die gesamte Einheit wird nach rechts verschoben. Ich würde es gerne so lange, wie der Bildschirm Größe geändert wird, sagen wir 1000px, für die TopBar zusammen mit dem Bildschirm verkleinern, wie es in der Größe geändert wird. Wenn es 1000px erreicht, passiert etwas anderes, aber darüber können wir uns später Gedanken machen.

Damit dies funktioniert, muss ich Abfragen für den TopBar-Container und die TopBar-Fixed-Breite oder nur den Container festlegen? Ist es auch eine maximale Breite oder eine minimale Breite, die ich für den gesamten Bildschirm ausrichten sollte?

#top-menu 
 
{ 
 
    width: 100%; 
 
    background-color: white; 
 
    height: 40px; 
 
    color: #00a5b5 
 
} 
 

 
#topMenu-fixedWidth 
 
{ 
 
    height: 80px; 
 
    width: 1156px; 
 
    color: #00a5b5; 
 
    margin: 0 auto; 
 
} 
 

 
#topMenu-fixedWidth ul 
 
{ 
 
    list-style: none; 
 
    float: right; 
 
    margin-right: 5px; 
 
} 
 

 
#topMenu-fixedWidth ul:nth-child(4) 
 
{ 
 
    margin-right: 0; 
 
} 
 

 
#topMenu-fixedWidth ul li 
 
{ 
 
    float: left; 
 
    margin: 10px;

 <div id="top-menu"> 
 
      <div id="topMenu-fixedWidth"> 
 
       <ul> 
 
        <li class="topMenuText">Partners</li> 
 
        <li class="topMenuText">Careers</li> 
 
        <li class="topMenuText">Language</li> 
 
        <li class="topMenuText">Login</li> 
 
       </ul> 
 
      </div> 
 
     </div>

Answer 1

Da Sie Inhalte wollen mit einem Re-Sizing-Bildschirm Größe neu zusammen, sollten Sie viewport percentage Längen, wie vh verwenden und vw. Elemente werden relativ zum Ansichtsfenster bemaßt.

Ist es auch eine maximale Breite oder eine minimale Breite, die ich für den gesamten Bildschirm ausrichten sollte?

Entweder. Ist nicht wirklich wichtig, es sei denn, Sie haben ein bestimmtes Bedürfnis.

@media (min-width: 1000px) { 
    /* executes code here when the screen is 1000px or more */ 
} 

@media (max-width: 1000px) { 
    /* executes code here when the screen is 1000px or less */ 
} 

Weitere Informationen:

• Max-Width vs. Min-Width
• Common breakpoints for media queries on a responsive site

Answer 2

Sie haben Ihre CSS-Basis, die für alle Bildschirmgrößen gilt. Darüber hinaus legen Sie einfach die CSS-Klassen fest, die Sie ändern möchten, wenn sich die Bildschirmgröße ändert. Zum Beispiel, wenn Sie den Schwimmer unter 1000px wollen entfernen, würden Sie wie folgt vor:

#topbar {float: right;} 
@media screen and (max-width: 1000px) { 
    #topbar {float: none;} 
} 

Answer 3

Ihr # top-Menü bereits eine Breite von 100% hat, so dass, egal was die Größe wird. Ihre # topMenu-fixedWidth wird innerhalb einer Medienabfrage sein müssen, etwa so:

@media screen and (min-width 1000px){ 
    #topMenu-fixedWidth 
    { 
     height: 80px; 
     width: 1156px; 
    } 
} 

* Hinweis: Sie müssen nur die Arten sind Sie in der Medienabfrage ändern möchten.