Có thể ai đó vui lòng giải thích các truy vấn phương tiện CSS?

Question

Tôi đã đọc bài viết về chúng qua số css3.info, nhưng tôi không cảm thấy như nó đã giải thích đủ rõ. Tôi cũng không thể lấy ví dụ của mình để thay đổi với kích thước màn hình của tôi. Tôi đã thử trong Safari, FF, Chrome.

Đây có phải là tính năng chưa sẵn sàng để cấy ghép không?

Nếu tôi muốn điều chỉnh một số kiểu khi cửa sổ trình duyệt có chiều rộng nhỏ hơn 1024px. Làm thế nào tôi có thể làm điều đó?

Answer 1

Nguyên tắc áp dụng cho các kích thước màn hình có nghĩa là, với lý do W3C spec "là có thể sử dụng trên màn hình và các thiết bị cầm tay nếu chiều rộng của khung nhìn là" trong những hạn chế nhất định.

http://www.w3.org/TR/css3-mediaqueries/

Nếu bạn muốn điều chỉnh phong cách khi viewport nhỏ hơn 1024px bạn có thể sử dụng quy tắc này:

@media screen and (max-width: 1024px) { … } 

nào quy định này chỉ áp dụng cho các viewport kích thước thực tế. Nếu bạn thay đổi kích thước chế độ xem mà không tải lại trang, các kiểu sẽ không được áp dụng.

Answer 2

Để áp dụng style sheet vào một tài liệu khi được hiển thị trên một màn hình rộng lớn hơn 800 pixel:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" > 

Để áp dụng style sheet vào một tài liệu khi hiển thị trên bất kỳ thiết bị rộng dưới 400 pixel:

<link rel="stylesheet" media="all and (max-device-width: 400px)" > 

bên

@media all and (max-width:800px) { 
    body { color: red; } 
} 

cho iphone

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

:: combining media query

Answer 3

Để xem cách khác nhau truy vấn phương tiện truyền thông phản ứng đã đổi kích thước hoặc thay đổi hướng, hãy thử bản demo trên trang này:

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

Bạn có thể điều chỉnh các thuộc tính truy vấn phương tiện truyền thông để có được một cảm giác về cách chúng ảnh hưởng đến một trang .

Answer 4

Dưới đây là một vài dự án giải quyết vấn đề này và đang ở vị trí hàng đầu của css và màn hình kích thước động:

• 320 and up:

  '320 và Up' ngăn chặn các thiết bị di động từ tải xuống nội dung trên máy tính để bàn bằng cách sử dụng biểu định kiểu màn hình nhỏ xíu làm điểm bắt đầu của màn hình.

• Lessframework:

  Ít Framework là một hệ thống lưới CSS cho việc thiết kế các trang web thích ứng.Nó chứa 4 bố cục và 3 bộ cài đặt trước kiểu chữ, tất cả dựa trên một lưới đơn .