SORU
16 HAZİRAN 2011, PERŞEMBE


Masaüstü, tablet ve mobil hedef Nasıl?medya Sorguları:

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

CEVAP
8 EYLÜL 2011, PERŞEMBE


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.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Jejoab

    Jejoab

    4 NİSAN 2008
  • Plugable

    Plugable

    19 Mayıs 2010
  • The Weavers of Eternity Paracord Tutorials

    The Weavers

    1 Ocak 2014