2016-04-14 33 views
-1

Telefonla (hem portre hem manzara), tabletle (hem portre hem manzara) hem de masaüstünü eşleştirmek için genel CSS medya sorgularının bir listesini arıyorum. Bazı genel medya sorguları ile birçok yayın buldum, ancak bunlar genellikle farklı ve belki de onları anlamıyorum. ÖrneğinAygıtlar için genel medya sorguları

, aşağıdaki sorgu:

@media only screen and (max-width: 768px) { } 

tüm telefonlar (dikey ve yatay) ve tablet portre eşleşmiyor? Ya da ne?

Ben de gibi diğer örnekler bulundu aşağıdadır:

/* mobile */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { } 
/* tablet */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { } 

ve doğru olarak telefon (portre ve manzara her ikisi) ve tablet maç için doğru önceki sorguları

/* mobile */ 
@media screen and (max-width:767px) { } 
/* tablet */ 
@media screen and (max-width:1024px) { } 

(her ikisi portre ve manzara)? Marcos kararları kullanmaktır dediğim gibi

Teşekkür

+2

İlk ve son kodlar, en fazla genişlik özelliğine uyan herhangi bir aygıtta ve masaüstünde çalışacaktır, bu bir mobil olup olmadığını farketmez. İkinci örnek, yalnızca iki çözünürlük arasındaki cihazlarda çalışır, ancak çözünürlükle eşleşse bile masaüstünde çalışmaz. Bence daha iyi seçenekler her zaman hedef kararlar, cihazlar değil, bu mod ile duyarlı bir web tasarımı yapıyorsunuz. Çözünürlük yerine cihazları hedeflerseniz, bu yanıt vermez, ancak bu mobil sürümdür. –

+1

Yönlendirmeyle ilgili endişeleriniz varsa, 'orientation' özelliği ile oynamayı deneyebilirsiniz. İşte üzerinde [w3 docs] (https://www.w3.org/TR/mediaqueries-4/#orientation). –

cevap

0

iyi yolu, medya sorguları kullanmak. İlk kodunuz @media only screen and (max-width: 768px) { }, 768 pikselin maksimum ekran çözünürlüğüne sahip tüm cihazları hedefleyecektir. Telefonunuzda 640 piksellik bir çözünürlük varsa, bunu etkileyecektir, telefonunuz daha büyük bir çözünürlükte 768 piksel içeriyorsa, girdiğiniz kod {} göz ardı edilecektir. Genellikle bu, duyarlı tasarımlar yapmak için kullanılır ve farklı cihazlar için farklı çözünürlüklerde sorguları kullanırsınız (en yaygın sorguları kolayca bulabilirsiniz).

Yardım edin.