@ -moz-document và @media cùng nhau

Question

Làm cách nào để kết hợp các tiền tố trên? Điều này không làm việc:

@media screen and (max-width: 991px) and (min-width: 768px) { 

    @-moz-document url-prefix() { 
    .navbar-default .navbar-brand {margin-left:30%;} 
    } 
} 

Và @media bên trong @-moz-document url-prefix() làm việc cũng deosn't.

Answer 1

Nó hoạt động tốt đối với tôi bằng cách sử dụng các @-moz-document lúc đầu và @media truy vấn bên trong:

@-moz-document url-prefix() { 
    @media screen and (max-width: 991px) and (min-width: 768px) { 
     .navbar-default .navbar-brand {margin-left:30%;} 
    } 
} 

Demo: JSFiddle

Answer 2

Mỗi phần tử giả phải có hiệu lực trong thời hạn quy định, nếu không thì toàn bộ quy tắc bị bỏ.

Tham khảo: https://developer.mozilla.org/en-US/docs/Web/CSS/@document và http://www.w3.org/TR/css3-syntax/#rule-sets