Giá trị độ phân giải tốt để sử dụng với truy vấn phương tiện là gì?

Question

Gần đây tôi đã chơi xung quanh với CSS Media Queries vì ​​đó là một cách tuyệt vời để làm cho trang web của tôi thích nghi với các kích thước màn hình khác nhau. Tôi đang lên kế hoạch triển khai chúng vào phiên bản trực tiếp.

Câu hỏi của tôi là: Có bất kỳ giá trị độ phân giải được đề xuất nào mà bố cục thay đổi không?

Answer 1

Xem bài viết này cho một mẫu '320 và Up' - bởi Andy Clarke, nó được sử dụng bởi nhiều nhà phát triển và nhà thiết kế: http://www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up

Nếu bạn cuộn xuống các phương tiện truyền thông truy vấn phần bạn sẽ thấy họ sử dụng năm CSS3 Truyền thông Số lần truy vấn (480, 600, 768, 992 và 1382px). Thông thường tôi chỉ cần 4 (480, 600, 768, 1024).

Để giải thích các dãy:

min-width: 480px: Sẽ nhắm mục tiêu các thiết bị di động ở chế độ nằm ngang và lên

min-width: 600px: Mục tiêu tablet ở chế độ dọc và lên

min-width: 768px: Viên nén các mục tiêu trong chế độ phong cảnh và lên

min-width: 1024px: Nhắm mục tiêu chế độ xem máy tính để bàn

Và thông thường tôi sẽ có CSS ​​xem ảnh chân dung trên điện thoại di động của mình ngay từ đầu (do đó thuật ngữ "320 trở lên").

Answer 2

Tôi chỉ muốn thêm vào câu trả lời của Suvi.

Thiết kế thích ứng áp dụng các truy vấn phương tiện cho các giải pháp được nhắm mục tiêu, tuy nhiên với Thiết kế đáp ứng, bạn có thể tự do thêm các điểm ngắt bất cứ khi nào bạn cảm thấy cần thiết.

Không có quy tắc nào về số lượng điểm ngắt mà một trang nên có, nhưng bạn nên thêm bất kỳ vị trí nào vào bố cục. Mục đích là đảm bảo thiết kế và luồng nội dung độc đáo bất kể chiều rộng của chế độ xem.

Tôi nghĩ bài này cung cấp một cái nhìn tổng quan tốt:

http://www.williamwalker.me/blog/an-introduction-to-responsive-design.html

Answer 3

Hãy thử này với màn hình 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 */ 
} 

Hy vọng bạn cũng tốt

Answer 4

tôi đã viết giải pháp ít này:

/* screens range */ 

@screen-s-max: 20em;   /* 320px */ 
@screen-min:  20.063em;  /* 321px */ 
@screen-max:  40em;   /* 640px */ 
@screen-m-min: 40.063em;  /* 641px */ 
@screen-m-max: 64em;   /* 1024px */ 
@screen-l-min: 64.063em;  /* 1025px */ 
@screen-l-max: 90em;   /* 1440px */ 
@screen-xl-min: 90.063em;  /* 1441px */ 
@screen-xl-max: 120em;  /* 1920px */ 
@screen-xxl-min: 120.063em; /* 1921px */ 

/* 
0----- smallmobile -----320----- mobile -----640----- tablet -----1024----- notebook -----1440----- desktop -----1920----- wide 
*/ 

@onlyScreen: ~"only screen"; 

@smallmobile: ~"(max-width: @{screen-s-max})"; 
@mobile: ~"(min-width: @{screen-s-max}) and (max-width: @{screen-max})"; 
@tablet: ~"(min-width: @{screen-m-min}) and (max-width: @{screen-m-max})"; 
@notebook: ~"(min-width: @{screen-l-min}) and (max-width: @{screen-l-max})"; 
@desktop: ~"(min-width: @{screen-xl-min}) and (max-width: @{screen-xl-max})"; 
@wide: ~"(min-width: @{screen-xxl-min})"; 

@portrait: ~"(orientation:portrait)"; 
@landscape: ~"(orientation:landscape)"; 

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)", 
~"only screen and (min--moz-device-pixel-ratio: 1.5)", 
~"only screen and (-o-min-device-pixel-ratio: 3/2)", 
~"only screen and (min-device-pixel-ratio: 1.5)"; 


@mobile-and-more: ~"(min-width: @{screen-min})"; 
@tablet-and-more: ~"(min-width: @{screen-m-min})"; 
@notebook-and-more: ~"(min-width: @{screen-l-min})"; 
@desktop-and-more: ~"(min-width: @{screen-xl-min})"; 

/* 

syntax example 

@media @onlyScreen and @tablet and @portrait , @notebook and @landscape, @mobile and @landscape{ 
    body{ 
    opacity: 0.8; 
    } 
} 

*/ 

Như được trình bày trong ví dụ cú pháp, bạn có thể kết hợp tất cả các biến ít hơn và nhận truy vấn phương tiện phức tạp. Sử dụng "và" cho toán tử logic AND và dấu phẩy cho OR. Bạn có thể kết hợp các độ phân giải màn hình khác nhau, hướng thiết bị (ngang/dọc) và võng mạc hoặc không phải thiết bị.

Mã này cũng dễ cấu hình được vì bạn có thể chỉnh sửa/thêm/loại bỏ các giá trị phạm vi màn hình để quản lý độ phân giải màn hình khác nhau.