Truy vấn phương tiện CSS

Question

Tôi đang cố gắng điều chỉnh ứng dụng web máy tính bảng của mình để sử dụng trên điện thoại di động. Chức năng Media Query có vẻ hoàn hảo và thử nghiệm ban đầu của tôi mang tính năng này. Câu hỏi tôi có là: với điện thoại và máy tính bảng thay đổi hướng của chúng từ chân dung thành ngang (khi xoay của thiết bị) thì chiều rộng tối đa sau đó tham chiếu là gì?

Nói cách khác, điện thoại Android lớn hơn có độ phân giải dọc theo các dòng 480x800, iPhone4 có độ phân giải 640x960 và BlackBerry Torch ban đầu có độ phân giải 360x480. Đây là tất cả các độ phân giải (W x H) khi các thiết bị được giữ ở chế độ dọc, vì vậy độ rộng tương ứng là 400, 640 và 360. Tuy nhiên, khi bạn xoay thiết bị thành ngang, chiều cao 'trở thành' chiều rộng cho mục đích hiển thị. Vì vậy, chiều rộng hiệu dụng trong cảnh quan sau đó trở thành tương ứng 800, 960 và 480, và độ rộng 800 và 960 trùng với chiều rộng của máy tính bảng làm xáo trộn màn hình.

Vì vậy, chiều rộng luôn luôn là chiều rộng? Tức là, khi thiết bị báo cáo kích thước của nó, giá trị độ rộng có luôn giữ nguyên cho mục đích CSS hay không hoặc giá trị độ rộng có thay đổi khi thiết bị xoay sang chế độ ngang không?

Cảm ơn tất cả các bạn trước.

Answer 1

Giá trị độ rộng sẽ thay đổi khi thiết bị bị lật, vì chiều rộng của trang đang được xem cũng thay đổi.

Nếu bạn muốn truy vấn cho dù thiết bị đang được sử dụng trong phong cảnh hoặc chân dung chế độ, bạn có thể sử dụng thuộc tính định hướng thay vì:

@media screen and (orientation: portrait) { 
} 

này sẽ kiểm tra nếu chiều rộng của cửa sổ trình duyệt lớn hơn chiều cao (định hướng: cảnh quan sẽ làm ngược lại). Để có kết quả tốt nhất, có thể bạn sẽ cần sử dụng kết hợp nhiều thuộc tính MQ bằng toán tử 'và' để kiểm tra chuỗi. tức là:

@media screen and (orientation: landscape) and (max-width: 960px) { 
} 

danh sách đầy đủ các đặc tính MQ có sẵn here.

Answer 2

Giá trị của thay đổi css dựa trên cảnh quan hoặc không trên điện thoại di động dưới dạng chiều rộng và chiều cao của thay đổi hiển thị trên điện thoại di động khi điện thoại hoặc máy tính bảng được xoay. vì vậy bạn phải cụ thể khi xác định kiểu css để nhắm mục tiêu những gì bạn muốn.

@media (min-width: 700px) và (định hướng: ngang) {

}

để xem chi tiết sự hiểu biết về các truy vấn phương tiện truyền thông tham quan: http://letsdopractice.com/css-media-queries/

Answer 3

Các truy vấn phương tiện truyền thông được sử dụng để xác định phong cách cho kích thước màn hình khác nhau. Tôi sẽ cho bạn biết về những điều cơ bản về truy vấn phương tiện. Cú pháp của phương tiện CSS Query là:

@media not|only mediatype and (media feature) { 
CSS-Code; 
} 

Đối với một chi tiết về truy vấn phương tiện truyền thông cú pháp toturial vui lòng truy cập This Site