Độ rộng để sử dụng trong truy vấn phương tiện

Question

Độ rộng tốt nhất để sử dụng truy vấn phương tiện để nhắm mục tiêu định hướng trang dọc và ngang trên các thiết bị khác nhau là gì? Có tiêu chuẩn nào không?

Answer 1

Tôi đang tìm kiếm mọi nơi để có câu trả lời tốt nhất cho việc này. Đây là những gì tôi tìm thấy.

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

Tôi nghĩ rằng điều này tốt hơn là xem xét phương pháp tiếp cận đầu tiên trên thiết bị di động. Bắt đầu từ trang tính di động và sau đó áp dụng truy vấn phương tiện có liên quan cho các thiết bị khác. Cảm ơn vì @ryanve. Đây là số link.

Answer 2

Tôi thấy đây là những điểm ngắt tốt để bắt đầu nhưng luôn kiểm tra và tinh chỉnh khi bạn thực hiện. Tôi cũng đề nghị sử dụng ems thay vì px cho kích thước cho các kích thước thiết bị đa dạng và độ phân giải (lý do mô tả ở đây (http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/))

Vì vậy, các truy vấn ở trên sẽ giống như thế này:

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

Ngoài ra còn một là nifty pixel để em tính trực tuyến ở đây (http://pxtoem.com/) Đối với những người bạn không quen thuộc, kể cả bản thân tôi.

Answer 3

Hãy thử điều này bao gồm võng mạc

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

Hãy thử truy vấn phương tiện này nó sẽ giúp bạn

@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

hoàn hảo truy vấn phương tiện truyền thông

@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) {}