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