@media chỉ màn hình và (tối đa chiều rộng: 479px) không hoạt động cho điện thoại di động

Question

Tôi đã thêm mã sau để đáp ứng. nhưng đối với phiên bản di động, màu nền hiển thị # 000. Nó có để không hiển thị màu nền là # 111.Please giúp đỡ

@media only screen and (max-width: 1024px) { 
body{ 
    background-color:#ff0000; 
    } 
} 

@media only screen and (max-width: 767px) 
{ 
body{ 
    background-color:#000; 
    } 
} 

@media only screen and (max-width: 479px) 
{ 
body{ 
    background-color:#111; 
    } 
} 

Answer 1

Trong phần đầu của tài liệu của bạn, hãy chắc chắn bạn có

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Nếu bạn bỏ qua này, sau đó nhiều thiết bị sẽ mở rộng quy mô trang để phù hợp với khung nhìn.

Chúc may mắn

Answer 2

Có lẽ bạn có thể chỉ định bằng cách sử dụng

@media only screen and (min-width:768px) and (max-width: 1024px) {} 

bởi vì nếu một màn hình là 200px chiều rộng nó sẽ tuân thủ tất cả các quy tắc khác đó là không vượt quá chiều rộng của chúng

Chúc bạn một ngày tuyệt vời

Answer 3

Hãy thử sử dụng chiều rộng thiết bị thay vì chỉ kích thước màn hình. Nhiều thiết bị di động/máy tính bảng sẽ mở các trang trong một tổng quan do đó kích thước màn hình sẽ bị bỏ qua.

Một số thiết bị di động sẽ phản hồi bộ chọn @media handheld.

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
/*Ipad*/ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) 
/* Smartphones (portrait and landscape)*/ 
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) 
/*Iphone 4*/ 
@media only screen and (min-device-pixel-ratio : 1.5) 
/*Iphone 4*/ 

@media handheld and (max-width: 960px) 
/*handheld*/ 

Answer 4

Tại sao không sử dụng Twitter Bootstrap? http://twitter.github.com/bootstrap/

Answer 5

Bạn có thẻ meta chế độ xem được chỉ định không? Tôi cũng đề nghị thay đổi 479 thành 480.

Dưới đây là ví dụ về thẻ meta chế độ xem - đây là ví dụ tôi sử dụng trên trang web đáp ứng của riêng tôi.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 

Answer 6

Kiểm tra trong thẻ

<meta name="viewport" content="width=device-width, initial-scale=1.0" />