Medya Sorguları: Masaüstü, tablet ve mobil cihazlar nasıl hedeflenir?

Medya sorguları hakkında biraz araştırma yapıyorum ve hala belirli boyutlardaki cihazları nasıl hedefleyeceğimi tam olarak anlamış değilim.

Masaüstü, tablet ve mobil cihazları hedefleyebilmek istiyorum. Bazı tutarsızlıklar olacağını biliyorum, ancak bu cihazları hedeflemek için kullanılabilecek genel bir sisteme sahip olmak güzel olurdu.

Bulduğum bazı örnekler:

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px)

Ya da:

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

Sizce bu 'kesme noktaları' her cihaz için ne olmalıdır?

Quantastical
Edited question 2013ösp6ös13 Mayıs 2013 в 1:06
Programlama
css3 css mobile tablet media-queries
2011ööp57öö10 Haziran 2011 в 10:57
37 görünümler
Çözüm

IMO bunlar en iyi kırılma noktalarıdır:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: 960'lık ızgaralarla daha iyi çalışacak şekilde geliştirildi:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Pratikte, birçok tasarımcı pikselleri ems'ye dönüştürür, büyük ölçüde ems daha iyi yakınlaştırma sağlar. Standart yakınlaştırmada 1em === 16px. Ems elde etmek için pikselleri 1em/16px ile çarpın. Örneğin, 320px === 20em.

Yoruma yanıt olarak, min-width' "mobile-first" tasarımında standarttır, burada en küçük ekranlarınız için tasarım yaparak başlarsınız ve daha sonra giderek artan medya sorguları ekleyerek daha büyük ekranlara doğru ilerlersiniz. İstermin-', ister `max-' veya bunların kombinasyonlarını tercih edin, kurallarınızın sırasına dikkat edin ve birden fazla kuralın aynı öğeyle eşleşmesi durumunda sonraki kuralların önceki kuralları geçersiz kılacağını unutmayın.

ryanve
Edited answer 2017ööp22öö5 Haziran 2017 в 5:22
Yorumlar (16)

Bir cihazı hedeflemek istiyorsanız min-device-width yazmanız yeterlidir. Örneğin:

iPhone için

@media only screen and (min-device-width: 480px){}

Tabletler için

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

İşte bazı iyi makaleler:

Fizzix
Edited answer 2014ööp13öö5 Mart 2014 в 5:13
Yorumlar (10)

  1. Çözünürlüğü bulmak için bu siteyi kullandım ve gerçek sayılara göre CSS geliştirdim. CSS'imin gerçekten istenen cihazlara ulaşması dışında, sayılarım yukarıdaki cevaplardan biraz farklı.

  2. Ayrıca, medya sorgunuzdan hemen sonra şu hata ayıklama kod parçasına sahip olun Örneğin:

    @media only screen and (min-width: 769px) and (max-width: 1281px) {
  /* 10 inç tablet ekranları için */
  body::before {
    content: "tabletten bazı masaüstü medya sorgularına (769 > 1281) ateşlendi";
    font-weight: kalın;
    display: block;
    text-align: center;
    background: rgba(255, 255, 0, 0.9); /* Yarı şeffaf sarı */
    konum: mutlak;
    üst: 0;
    sol: 0;
    sağ: 0;
    z-indeksi: 99;
  }
}

Bu hata ayıklama öğesini her bir medya sorgusuna ekleyin ve hangi sorgunun uygulandığını göreceksiniz.

loxsat
Edited answer 2019ösp25ös22 Ocak 2019 в 10:25
Yorumlar (0)