Medya sorguları ile ilgili birkaç araştırma yaptım ve hala tam olarak belirli boyutlarda cihaz hedef için nasıl anlamıyorum.

Masaüstü, tablet ve mobil hedef olmak istiyorum. Bazı farklılıklar olacak biliyorum ama bu cihazları hedef için kullanılan genel bir sistem olması 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)

Bu 'kesme' her cihaz için olmalı? ne düşünüyorsun

IMO bu en iyi kesme noktası:

@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 */ }

EditDaha iyi 960 ızgaralar ile çalışmak için rafine:

@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 */ }

Uygulamada, birçok tasarımcı b/c ems daha iyi yakınlaştırma göze ems piksel, büyük ölçüde dönüştürmek. Standart zoom 8**. 1em/16px piksel ems almak için çarpın. Örneğin, 320px === 20em için.