Szerokości używane w zapytaniach o media

Question

Jakie są najlepsze szerokości, aby używać zapytań o media do kierowania orientacji strony w orientację pionową i poziomą na różnych urządzeniach? Czy są jakieś standardy?

Answer 1

Szukam wszędzie najlepszej odpowiedzi. Oto co znalazłem.

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

Uważam, że jest to lepsze rozwiązanie, jeśli chodzi o mobilne pierwsze podejście. Rozpocznij od arkusza stylów mobilnych, a następnie zastosuj zapytania o media istotne dla innych urządzeń. Dziękujemy za @ryanve. Oto link.

Answer 2

Uważam, że są to dobre punkty przerwania, od których należy zacząć, ale zawsze testuj i dostosowuj. Chciałbym również zasugerować używać EMS zamiast px do wymiarów dla różnych wymiarów urządzeń i rozdzielczościach (powodów opisanych tutaj (http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/))

więc powyższe pytania będzie wyglądać następująco:

@media (min-width:20em) { /* smartphones, iPhone, portrait 480x320 phones */ } 
@media (min-width:30.063em) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ } 
@media (min-width:40.063em) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ } 
@media (min-width:60.063em) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } 
@media (min-width:64.063em) { /* big landscape tablets, laptops, and desktops */ } 
@media (min-width:80.063em) { /* hi-res laptops and desktops */ } 

Istnieje również sprytny piksel do kalkulatora online tutaj (http://pxtoem.com/) Dla tych z was, którzy nie są tacy znajomi, w tym ja.

Answer 3

Spróbuj tym siatkówki

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
} 

Answer 4

Spróbuj tego zapytania mediów pomoże Ci

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

@media (min-width:1024px) and (max-width:1279px) {} 

@media (min-width:768px) and (max-width:1023px) {} 

@media (min-width:480px) and (max-width:767px) {} 

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

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

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

Answer 5

idealny zapytania mediów

@media (max-width:400px) {} 
    @media (min-width:401px) and (max-width:599px) {} 
    @media (min-width:600px) and (max-width:767px) {} 
    @media (min-width:768px) and (max-width:950px) {} 
    @media (min-width:951px) and (max-width:1050px) {} 
    @media (min-width:1051px) {}