2015-04-25 17 views
5

Mobil kullanıcı dostu olmak için, @cch tarafından önerilen bir medya sorgusu gerçekleştirdim. Bu "kenara" (kenar çubuğu) etkili bir şekilde gizler, ancak "makale" (ana), tüm tarayıcılarda ve tüm aygıtlarda ortaya çıkan boş alana genişletmek için başarısız olur. Neyi yanlış yapıyorum? Aşağıdaki HTML ardındanNeden My Media Query'nin Talimatları Bazı Aygıtlarda% 100 Onaylanmadı

CSS: önceden

@media screen and (max-width: 750px) { 
 
    aside { display: none; } 
 
    article { width: 100%; } 
 
} 
 
#main { 
 
\t width: 58%; 
 
\t float: left; 
 
\t margin-left: 2%; 
 
} 
 
#sidebar { 
 
\t float: left; 
 
\t width: 34%; 
 
\t margin-left: 4%; 
 
}
<article id="main"> 
 
    <h2>The Advanced ON-SITE Advantage</h2> 
 
    <p>As a service for maintaining shades, shutters, blinds, and drapes through occasional cleaning and repair, you can be confident we're supremely qualified. </p> 
 
    <p>Correct identification of the many fabrics and coatings used in draperies, shades and top treatments is critical to safe, yet effective, cleaning of these items. Advanced On-Site is certified to do just that. It's why we're able to <a href="guarantee.html">guarantee</a> against shrinkage or damage.</p> 
 
    <p><span class="centered"> 
 
     <figure> 
 
     <img src="images/cleaninstall.jpg" width="400" height="225"> 
 
     <figcaption>Flawless cleaning and installations</figcaption> 
 
     </figure> 
 
     </span> Likewise, window coverings installed by Advanced On-Site do not suffer from poor funtionality due to improper installation. Only the best materials and fasteners are used, and great care is taken to ensure that every component enjoys the complete freedom of movement imperative to long life.</p> 
 
    </article> 
 
    <aside id="sidebar"> 
 
    <h2>Tip</h2> 
 
    <p>Window coverings are often damaged through incorrect operation. The following suggestion will increase life expectancy.</p> 
 
    <blockquote> 
 
     <p><strong>Never let go of a cord until you know it has come to rest:</strong></p> 
 
     <p>Shades and blinds with modern retractable mechanisms typically use control cord assemblies. These incorporate hard connectors that can damage delicate components on impact. With traditional cord-lock mechanisms, the cord should not be released until its &quot;catch&quot; is engaged. This prevents the bottom-heavy shade from crashing onto the sill.</p> 
 
    </blockquote> 
 
    <p>Even when the foregoing is observed, sun damage and simple wear may render the occassional repair necessary. If that happens call us.</p> 
 
    </aside>

teşekkür,

Dave

+0

Sadece etiketi kullanarak ve ona verdiğiniz tanıtımı ve etiketi kullanarak "makale # main {...}" kullanmayı denediniz mi? –

cevap

6

Seçici #mainarticle daha yüksek özgüllük vardır, bu yüzden genişlik hala 58 olduğunu Medya sorgusu eşleştiğinde bile%.

Medya sorgusu içindeki makalenin biçimlendirilmesi için daha yüksek özgüllüğe sahip bir seçici seçin; veya aynı olanı isterseniz, medya sorgusunu genel biçimlendirmenin altına yerleştirin.

https://css-tricks.com/snippets/html/responsive-meta-tag/:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Bu konu hakkında daha fazla bulabilirsiniz: Ayrıca

+0

Bana yoldan biraz daha fazla geçtiniz, ancak deneme yapmak istenen sonuçları vermedi. Cevabınızın ilk bölümünün dönüşümlü olarak belirtilebileceğini varsayalım: "Seçici" # ana "," seçmen "maddesinden mi?" Daha sonra, 'ana' için 'makale' için bir ikame mal bulmam gerektiğine inanıyorum, fakat aramaya devam ettikten sonra hala nerede olduğum konusunda flummoxed oldum? Son 2 saat içinde sayısız CSS hile-kılıfı, özgüllük hesaplayıcısı ve öğretici gördüm. Hiçbiri, değiştirme için bir hiyerarşiden bahsetmek için 'eşya' mülkünden bahsetmez. –

+1

'article' (tip seçici, bir“ özellik ”değil) özgüllüğü 0-0-0-1, oysa' # main' kimlik seçimi 0-1-0-0'dur. Daha yüksek özgüllüğe sahip olan basit bir seçici, "ana" kimliğine sahip, 0-1-0-1 olan "makale" türünde bir eleman seçerek, iki ana makalenin birleşmesidir. Yani sen de kullanabilirsin. Sorguyla eşleştiğinde, genişliğini% 100'e çıkarmak için medya sorgunuzun içinde bulunanı; Bkz. http://jsfiddle.net/tuaoeb0e/ // Özgüllük, CSS'nin en temel önemli ilkelerinden biridir, bu yüzden bu tanıdık değilse, daha fazla okumalısınız. – CBroe

2

kenara CBroe söylediklerini dışında, çok çeşitli cihazlara tutarlı sonuçlar sağlanması için aşağıdaki meta etiketi eklemek emin olun

+1

Teşekkürler @captainspi, bitti –

İlgili konular