2016-07-29 23 views
5

Điện thoại và máy tính bảng hiện đại có độ phân giải rất cao.Làm cách nào để các điểm ngắt hoạt động trên các thiết bị có độ phân giải cao hiện đại?

Ví dụ: Galaxy S7 cạnh của tôi có độ phân giải 1440 x 2560 pixel.

Điểm ngắt chung cho thiết bị di động có vẻ là khoảng 768 pixel, chẳng hạn như trong bootstrap.

Ví dụ từ bootstrap.css:

@media (min-width: 768px) { 
    .container { 
    width: 750px; 
    } 
} 
@media (min-width: 992px) { 
    .container { 
    width: 970px; 
    } 
} 
@media (min-width: 1200px) { 
    .container { 
    width: 1170px; 
    } 
} 

Làm thế nào mà màn hình điện thoại của tôi với phiên bản "phản ứng nhanh" của các trang web mặc dù độ phân giải của nó được cho là lớn hơn so với hầu hết các màn hình máy tính để bàn? Từ ví dụ, có vẻ như điện thoại của tôi sẽ luôn hiển thị trang web ở chế độ "máy tính để bàn".

Trả lời

3

Từ bài viết A pixel is not a pixel is not a pixel ...

tôi biết những gì nhà phát triển web quan tâm, tuy nhiên. Họ cần pixel CSS. Tức là, “pixel” được sử dụng trong khai báo CSS chẳng hạn như width: 300px hoặc font-size: 14px.

Các pixel này không có gì để thực hiện với mật độ pixel thực tế của thiết bị . Về cơ bản, chúng là một cấu trúc trừu tượng được tạo cụ thể theo số cho các nhà phát triển web của chúng tôi.

Cách dễ nhất để giải thích khi chúng tôi xem xét thu phóng. Nếu người dùng phóng to trong, phần tử có width: 300px chiếm nhiều hơn và nhiều hơn nữa màn hình và do đó sẽ trở nên rộng hơn và rộng hơn khi được đo trong các pixel (vật lý) của thiết bị. Tuy nhiên, trong CSS pixel, chiều rộng vẫn là 300px, và hiệu ứng thu phóng được tạo bằng cách mở rộng CSS pixel nhiều như là cần thiết.

Xem thêm:

Các vấn đề liên quan