Phương pháp hay nhất với truy vấn phương tiện trong CSS3 là gì?

Question

Tôi đang tìm câu trả lời cho một số câu hỏi về tính năng CSS3 - Media Queries:

1. Những cách là tốt hơn (đối với trình duyệt do hiệu suất) cho tuyên bố quy tắc css cho độ phân giải khác nhau?

   //this in head: 
   <link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" /> 
   
   //or this in css file: 
   @media only screen and (max-width: 1024px){ 
       //styles here 
   } 
   

2. chênh lệch giữa max-device-width và max-width là gì? Quy tắc chỉ có được giải quyết cho trình duyệt di động (max-device-width) hoặc máy tính để bàn (max-width) không?

3. Nếu tôi viết quy tắc truy vấn phương tiện cho máy tính bảng có độ phân giải 1280x800 nơi người dùng cũng có thể sử dụng chế độ dọc/ngang, giao diện trông như thế nào? Tôi nên viết các quy tắc cho max-width: 800px và max-width: 1280px hoặc có cách khác?

4. Nếu tôi viết các quy tắc tôi nên viết một cái gì đó như thế này:

   <link ... media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)... /> 
   

   hoặc thay hai này:

   <link ... media="only screen and (max-device-width: 480px) ... /> 
   <link ... media="only screen and (max-device-width: 1024px) ... /> 
   

---

T.B. Vui lòng giải thích bất kỳ lỗi chính tả hoặc ngữ pháp nào, tiếng Anh không phải là ngôn ngữ đầu tiên của tôi

P.S.S. Trước khi tôi đăng câu hỏi này, tôi dành một chút thời gian để tìm kiếm trên stackoverflow và không tìm thấy thông tin về câu hỏi này. Nếu tôi đã sai và có câu hỏi tương tự, tôi sẽ xóa bài đăng của mình.

Answer 1

1. Quy tắc trong tệp css để giảm số lượng yêu cầu (tốt hơn cho hiệu suất).

2. • max-width là chiều rộng của vùng hiển thị mục tiêu

   • max-device-width là độ rộng của toàn bộ khu vực vẽ của thiết bị

3. Các cách khác tôi biết để nhắm mục tiêu dọc hoặc ngang, hãy thêm orientation như sau:

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

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

4. Để xác định một stylesheet cho các thiết bị di động có chiều rộng giữa 320 và 480 pixel bạn phải viết:

<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="mobile.css"> 

// 1 Dấu bằng đã mất tích, < 6 ký tự giới hạn. Mods, xin vui lòng loại bỏ điều này.Cảm ơn

Answer 2

Tôi đang tìm kiếm thông tin tốt về các phương pháp hay nhất trong thiết kế đáp ứng và tôi sẽ cung cấp cho bạn lời khuyên.

Trong This question nhà phát triển gặp sự cố khi anh ấy sử dụng điều kiện chân dung CSS và làm cho bàn phím xuất hiện khi anh ấy chọn văn bản đầu vào của tài liệu. Tôi không chắc chắn tại sao nhưng nó phá vỡ điều kiện chân dung.

Trong This website bạn có thể tìm thông tin về các phương pháp hay hơn khi tạo truy vấn phương tiện mà tôi nghĩ là tốt nhất. Cá nhân tôi sẽ sử dụng loại truy vấn phương tiện độc quyền trong trang web của mình.

Nhưng mặt khác, bạn có thể theo dõi This site các đề xuất. Tôi nghĩ rằng họ là đúng nhưng tôi thích tạo và sử dụng các thiết bị phổ biến dimentions phương tiện truyền thông truy vấn của bản thân mình.

Dưới đây là danh sách:

• < 480 (áp dụng cho kích thước màn hình lớn hơn, nhỏ hơn điện thoại thông minh)
• < 768px, đó là lý tưởng cho các điện thoại thông minh lớn hơn và máy tính bảng nhỏ hơn

• 768px , áp dụng cho mọi thứ lớn hơn như màn hình máy tính bảng lớn và màn hình máy tính để bàn.

Ngoài ra, chúng có thể được sử dụng quá nếu bạn đã có năng lượng và thời gian:

• < 320px, đó là rất tốt cho nhỏ, res điện thoại cấp thấp cũ

• Biểu định kiểu 1024px cho màn hình rộng trên máy tính để bàn.

Tôi hy vọng nó sẽ giúp bạn.