CSS medya sorgusunu tarayıcı yerine html belgesinin em boyutunu kullanın.

Question

Pencere öğelerinin genişliğine bağlı olarak öğelerin genişliğini pencerenin genişliğine göre değiştirmek için medya sorguları kullanmaya çalışıyorum (bu, sayfaların sütunların genişliğini değiştirmeden sütunların genişliğini değiştirmeme izin verir). Yazı tipi boyutunu değiştirirseniz her şeyin doğru görünmesini sağlamak için bunu, piksel yerine em'leri kullanarak yapmak isterim. Aşağıdaki kullanmak Ancak,: Pencerenin minimum genişlik 42 * 16px, benim tarayıcı (Safari) varsayılan yazı tipi boyutunu ulaştığında

html { 
    font-size: 12px; /* you could also use 75% if you want to be percent based.*/ 
} 

@media screen and (min-width: 42em) { 
    div#page { 
     width: 42em; 
    } 
} 

medya sorgusu, tetikleyecek iken div # genişliği sayfa, yazı tipi boyutunu html öğesinden miras alarak 42 * 12px olacaktır. Medya sorgularının kullandığım metnin genişliğine göre tetiklenmesini gerçekten isterim, bu işi yapmanın bir yolu var mı? W3C kaynaktan

Answer 1

Bkz medya sorgusunda, medya sorgular “Göreli birimler birimleri bildirimleri sonuçlarına göre hiçbir zaman anlamına gelir başlangıç ​​değerine dayanmaktadır Hayır, çünkü, olamaz. Örneğin, HTML'de, "em’ birimi "font-size" nin başlangıç ​​değerine göredir. ”(Media Query spec, 6 Units). font-size'un başlangıç ​​değeri, tarayıcıya bağımlı bir şekilde (CSS'de ayarlayabileceğiniz herhangi bir şeyden bağımsız olarak) fiziksel boyuta eşlenen medium'dur.

Sonuç, yazı tipi boyutunu nasıl ayarladığınıza bağlıdır. Kök öğenin yazı tipi boyutunu piksel olarak ayarlarsanız, em kullanımı esneklik sağlamayacağından, ortam sorgularındaki pikselleri de kullanmak mantıklıdır. Kök öğesinin yazı tipi boyutunu yüzde olarak ayarlarsanız, medya sorgularında em'u kullanmak mantıklıdır, ancak yalnızca em'un tarayıcının varsayılan yazı tipi boyutu anlamına geldiğini ve buna göre em çarpanını seçmeniz gerektiğini dikkate almanız gerekir.

Answer 2

(http://www.w3.org/TR/CSS21/syndata.html)
em birimi elemanının font-size özelliği hesaplanmış değerine eşittir hangi kullanılır. istisnası 'em', 'font-size' özelliğinin değerinde meydana geldiğinde, bu durumda ana öğenin ana öğesinin yazı tipi boyutunu belirtir.

html { font-size:1em; width:42em; } 
body { font-size:1.6em; } 

@media screen and (max-width:40em) { 
    div#page { font-size:0.875em; } /* 14px font */ 
} 

Not: 42em muhtemelen tarayıcı penceresinin genişliğinin% 100'ü olmayacaktır. Farklı görüntü genişlikleri (max-width:1200px), (max-width:1024px) için farklı hareket etmek için @media değiştirirseniz, muhtemelen daha sonra düşündüğünüz efektin daha fazlasını elde edersiniz.

Answer 3

Sadece aynı şeylere bakıyordum ve AFAIK, tarayıcının/aygıtın "yerel" yazı tipi boyutunu değiştirmenin bir yolu yok; ama buna bakarsak, aslında bu iyi bir şey.

Medya sorgusu ve html etiketi göreceli birimlerde ayarlanmışsa - herhangi bir aygıt veya tarayıcıda aynı temel numaraya atıfta bulunur (masaüstü tarayıcılarda 16px'dir, ancak farklı olabilir) diğer cihazlar veya kullanıcı yakınlaştırmayı değiştirirse).

Eğer html metin boyutunuzu bu değerin bir yüzdesine veya em-ölçüsüne ayarlarsanız (12px'in masaüstü eşdeğeri için,% 75 veya 0.75em kullanın) ve ardından ortam sorgularınızı pikselin bölünmesine göre ayarlayın. Bu değere göre genişlik (960px'lik masaüstü eşdeğeri için, 60em'i kullanın), her bir zum seviyesinde her cihaza yerleştirmek için her şey düşmelidir.

de bu link