Medienabfragen in ungeordneter Reihenfolge

Ich arbeite an einer Website, wo die CSS schrecklich unorganisiert scheint.Medienabfragen in ungeordneter Reihenfolge

Das erste, was mir aufgefallen ist, dass die Medienabfragen in der folgenden Reihenfolge sind ... sicherlich ist das falsch? Wäre es sinnvoll, in die richtige Reihenfolge zu reorganisieren? Ist das ohne große Arbeit möglich? Ich möchte so viele Wiederholungen wie möglich vermeiden, also wäre das die richtige Reihenfolge, könnte ich einige dieser Haltepunkte eliminieren?

@media screen and (max-width:997px) 
@media screen and (min-width:674px) and (max-width:997px) 
@media screen and (max-width:997px) 
@media screen and (min-width:998px) 
@media screen and (max-width:768px) 
@media only screen and (min-width: 998px) 
@media only screen and (max-width: 997px) and (min-width: 674px) 
@media only screen and (max-width: 673px) 
@media print 
@media only screen and (max-width: 997px) 
@media only screen and (max-width: 768px) 
@media only screen and (min-width: 769px) and (max-width: 997px) 
@media only screen and (min-width: 674px) and (max-width: 997px) 
@media only screen and (max-width: 673px) 
@media only screen and (min-width: 998px) 
@media only screen and (min-width: 674px) and (max-width: 997px) 
@media only screen and (max-width: 673px) 
@media only screen and (max-width: 551px) 
@media only screen and (max-width: 440px) 
@media only screen and (max-width: 380px) 
@media screen and (max-width:997px)

Quelle

2016-03-30 wingyip

Ja, diejenigen, die doppelt vorhanden sind ... – aphextwix

Gibt es CSS-Selektoren zwischen jedem dieser Medien-Anfragen? Wenn der Entwickler mit einem Vorprozessor wie SASS gearbeitet hat, könnte er genauso gut verschachtelte Medienabfragen mit einem Breakpoint-Manager wie sass-breakpoint verwendet haben, der dann in CSS gebündelt wird. –

Bei der Auswahl von Haltepunkten ist Folgendes zu beachten: http://stackoverflow.com/q/8564752/3597276 –

In Ihrem Code gleichen @media Abfragen verwendet werden mehrere Male sicher können Sie Code von ihnen verschmelzen

Zweitens ist eine schöne Praxis @media Anfragen von großen zu niedrig für die Ex zu schreiben.

Verwenden Sie @media only screen and (min-width: 998px) oben, da es höher in Ihrem Code ist, dann kleiner n kleiner.

Wenn Sie Zeit haben, so kurz über @media Abfragen lesen Sie hier: http://www.htmlgoodies.com/html5/tutorials/an-introduction-to-css3-media-queries.html#fbid=XIoHGkg8UyR

Quelle

2016-03-30 19:47:12

dieses Beispiel könnte hilfreich sein, verwenden @media nur Bildschirm und (min-width: 998px) höher zu senken.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<style> 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.row::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 
[class*="col-"] { 
 
    float: left; 
 
    padding: 15px; 
 
} 
 
html { 
 
    font-family: "Lucida Sans", sans-serif; 
 
} 
 
.header { 
 
    background-color: #9933cc; 
 
    color: #ffffff; 
 
    padding: 15px; 
 
} 
 
.menu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.menu li { 
 
    padding: 8px; 
 
    margin-bottom: 7px; 
 
    background-color: #33b5e5; 
 
    color: #ffffff; 
 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
} 
 
.menu li:hover { 
 
    background-color: #0099cc; 
 
} 
 
.aside { 
 
    background-color: #33b5e5; 
 
    padding: 15px; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    font-size: 14px; 
 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
} 
 
.footer { 
 
    background-color: #0099cc; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    font-size: 12px; 
 
    padding: 15px; 
 
} 
 
/* For mobile phones: */ 
 
[class*="col-"] { 
 
    width: 100%; 
 
} 
 
@media only screen and (min-width: 600px) { 
 
    /* For tablets: */ 
 
    .col-m-1 {width: 8.33%;} 
 
    .col-m-2 {width: 16.66%;} 
 
    .col-m-3 {width: 25%;} 
 
    .col-m-4 {width: 33.33%;} 
 
    .col-m-5 {width: 41.66%;} 
 
    .col-m-6 {width: 50%;} 
 
    .col-m-7 {width: 58.33%;} 
 
    .col-m-8 {width: 66.66%;} 
 
    .col-m-9 {width: 75%;} 
 
    .col-m-10 {width: 83.33%;} 
 
    .col-m-11 {width: 91.66%;} 
 
    .col-m-12 {width: 100%;} 
 
} 
 
@media only screen and (min-width: 768px) { 
 
    /* For desktop: */ 
 
    .col-1 {width: 8.33%;} 
 
    .col-2 {width: 16.66%;} 
 
    .col-3 {width: 25%;} 
 
    .col-4 {width: 33.33%;} 
 
    .col-5 {width: 41.66%;} 
 
    .col-6 {width: 50%;} 
 
    .col-7 {width: 58.33%;} 
 
    .col-8 {width: 66.66%;} 
 
    .col-9 {width: 75%;} 
 
    .col-10 {width: 83.33%;} 
 
    .col-11 {width: 91.66%;} 
 
    .col-12 {width: 100%;} 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="header"> 
 
    <h1>Chania</h1> 
 
</div> 
 

 
<div class="row"> 
 

 
<div class="col-3 col-m-3 menu"> 
 
    <ul> 
 
    <li>The Flight</li> 
 
    <li>The City</li> 
 
    <li>The Island</li> 
 
    <li>The Food</li> 
 
    </ul> 
 
</div> 
 

 
<div class="col-6 col-m-9"> 
 
    <h1>The City</h1> 
 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
 
</div> 
 

 
<div class="col-3 col-m-12"> 
 
    <div class="aside"> 
 
    <h2>What?</h2> 
 
    <p>Chania is a city on the island of Crete.</p> 
 
    <h2>Where?</h2> 
 
    <p>Crete is a Greek island in the Mediterranean Sea.</p> 
 
    <h2>How?</h2> 
 
    <p>You can reach Chania airport from all over Europe.</p> 
 
    </div> 
 
</div> 
 

 
</div> 
 

 
<div class="footer"> 
 
    <p>Resize the browser window to see how the content respond to the resizing.</p> 
 
</div> 
 

 
</body> 
 
</html>

Quelle

2017-07-01 06:42:39

Medienabfragen in ungeordneter Reihenfolge

Antwort

Verwandte Themen