Có cách nào để tạo quy tắc CSS chỉ dành cho máy tính để bàn không?

Question

Tôi phát hiện ra Droid của tôi có độ rộng tối đa 800 pixel, tôi nghĩ rằng một số máy tính có độ phân giải thấp hơn, nhưng tôi muốn Droid hiển thị CSS di động, vì vậy tôi không chắc chắn rằng chiều rộng thiết bị tối đa là giải pháp tốt nhất . Vì vậy, không ai biết làm thế nào tôi sẽ thiết kế thẻ liên kết CSS của tôi để CSS di động chỉ được sử dụng bởi điện thoại thông minh trong khi CSS máy tính để bàn chỉ được sử dụng bởi máy tính để bàn (bao gồm loại có chiều rộng dưới 800px)?

Answer 1

Đặt CSS trong trang PHP phát hiện trình duyệt/thiết bị từ biến môi trường và phân phối phiên bản đúng của CSS.

Answer 2

Thiết kế Web Responsive, sử dụng phương tiện truyền thông truy vấn

@media screen and (min-width: 800px) { 
    // this css will only be used when the screen size is min 800px 
} 

Answer 3

Khoảng cách giữa các thiết bị di động và máy tính để bàn là nhận -consider gần hơn và gần gũi hơn, ví dụ, máy tính bảng hay thiết bị lai gần đây mới.

Như Aaron điểm, bạn có thể muốn xác định các quy tắc khác nhau dựa trên màn hình thiết bị (chiều rộng tối thiểu hoặc chiều rộng tối đa). Ví dụ:

@media screen and (min-width: 800px) { 
    // this css will only be used when the screen size is min 800px 
} 

Một tiêu chí khác nhau mà bạn có thể muốn sử dụng là nhắm mục tiêu các thiết bị dựa trên khả năng màn hình của họ:

• Touchscreen media-queries

Answer 4

Tôi đã thử các giải pháp trên, nhưng họ didn 't làm việc cho iPad ở chế độ ngang. Cảnh quan của iPad là 1024 px. Vì vậy, giải pháp của tôi là:

@media only screen and (min-width: 1025px) { 
     .myClass { 
      /*...your desktop-only style...*/ 
     } 
    }