İç içe geçmiş ortamdaki medya sorguları

CSS'nin korkunç derecede dağınık olduğu bir web sitesinde çalışıyorum.İç içe geçmiş ortamdaki medya sorguları

Fark ettiğim ilk şey, medya sorgularının aşağıdaki karmaşa içinde olmasıydı ... elbette bu yanlış mı? Doğru sıraya göre yeniden düzenlemek mantıklı olur mu? Büyük miktarda iş olmadan bu mümkün mü? Mümkün olduğunca çok tekrardan kaçınmak istiyorum, bu yüzden doğru sıra ne olurdu, bu sınır değerlerden bazılarını ortadan kaldırabilir miyim? kodunuzu Aynı @media sorgularda

@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)

kaynak

2016-03-30 wingyip

Evet, çoğaltıldığı olanlar ... – aphextwix

bu medya sorguları herhangi arasındaki CSS seçicileri var mı? Geliştirici, SASS gibi bir ön işlemciyle çalışıyorsa, daha sonra CSS içine yerleştirilmiş sass-breakpoint gibi bir breakpoint yöneticisi ile yuvalanmış medya sorguları kullanıyor olabilir. Kesme noktalarını seçerken dikkat edilmesi gereken –

: http://stackoverflow.com/q/8564752/3597276 –

kesinlikle

İkincisi bunların kodunu birleştirebilirsiniz birden çok kez kullanılır, güzel uygulama ex düşüğe büyükten @media sorguları yazmaktır. Kodunuzda daha yüksek olduğundan ve daha küçük boyutta olduğundan, numaralı telefonu kullanın.

bunu burada kısa yaklaşık @media sorguları okumak vakit varsa:, http://www.htmlgoodies.com/html5/tutorials/an-introduction-to-css3-media-queries.html#fbid=XIoHGkg8UyR

kaynak

2016-03-30 19:47:12

bu örnek yararlı olabilir @media sadece ekran ve (min-width: 998px) kullanın yüksek düşürmek için.

<!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>

kaynak

2017-07-01 06:42:39

İç içe geçmiş ortamdaki medya sorguları

cevap

İlgili konular