Danh sách truy vấn phương tiện được phân cách bằng dấu phẩy không hoạt động

Question

Tôi đang mã hóa trang web bằng AngularJS và SCSS. Tôi đang trong giai đoạn phát triển di động và tôi nhanh chóng phát hiện ra (đối với dự án này) mà tôi cần một cách để nhắm mục tiêu nhiều điểm ngắt bằng cách sử dụng truy vấn @media. Vì vậy, tôi tìm thấy thông qua this SO answer và this CSS Tricks Post cũng như nhiều câu trả lời khác trên SO. Sau đó, tôi đã triển khai các giải pháp mà tôi đã tìm thấy trong một trường hợp thử nghiệm, xem đoạn mã bên dưới để kiểm tra.

main { 
    background-color: grey; 
    height: 100%; 
    min-height: 1000px; 

    @media (max-width: 992px) { 
     background-color: red 
    } 

    @media (max-width: 768px) { 
     background-color: lightcoral 
    } 

    @media (max-width: 992px), (max-width: 992px) and (orientation: landscape) { 
     background-color: lightgreen; 
    } 

    @media (max-width: 768px), 
    (max-width: 768px) and (orientation: landscape) { 
     background-color: lightblue; 
     // Reset the min-height here, because we no longer have the sticky search bar. 
     min-height: 450px; 
    } 
} 

<main> 
    <h1>Page Title</h1> 
    <h2>Some Descriptive information</h2> 

    <div>Content</div> 
</main> 

Nhưng tôi đã không thể có được nó để làm việc. Những gì tôi đang cố gắng làm, cuối cùng, là có các kiểu được áp dụng khi người dùng ở chế độ ngang trên máy tính bảng hoặc điện thoại. Tuy nhiên, tôi không biết nếu tôi làm đúng hay sử dụng toán tử or chính xác.

Đồng bằng không hoạt động, tốt, câu lệnh đầu tiên (ví dụ: (max-width: 992px)) hoạt động nhưng câu lệnh thứ hai không đánh giá đúng. Theo Mozilla:

Danh sách được phân tách bằng dấu phẩy hoạt động giống như toán tử logic hoặc khi được sử dụng trong truy vấn phương tiện. Khi sử dụng danh sách truy vấn phương tiện được phân cách bằng dấu phẩy, nếu bất kỳ truy vấn phương tiện nào trả về true, các kiểu hoặc kiểu trang sẽ được áp dụng. Mỗi truy vấn phương tiện trong danh sách được phân cách bằng dấu phẩy được coi là truy vấn riêng lẻ và bất kỳ toán tử nào được áp dụng cho một truy vấn phương tiện đều không ảnh hưởng đến các truy vấn khác. --- Mozilla Documentation

Thậm chí nếu tôi phá vỡ các mã vào hai truy vấn phương tiện truyền thông riêng biệt:

@media (max-width: 992px) { 
    background-color: lightgreen; 
} 
@media (max-width: 992px) and (orientation: landscape) { 
    background-color: lightgreen; 
} 

Nó vẫn không hoạt động. Vì vậy, tôi không biết nếu tôi đang nhắm mục tiêu sai chiều rộng (khi ở trong cảnh quan) hoặc những gì tôi đang làm sai. Bất kỳ nhà phát triển Front-End nào khác có thể cho tôi biết tại sao các truy vấn phương tiện được phân tách bằng dấu phẩy của tôi không hoạt động?

EDIT: Đây là mã SCSS mẹ đẻ:

main { 
    background-color: $mono-90; 
    height: 100%; 
    min-height: 1000px; 

    @media screen and (max-width: map_get($grid-breakpoints, 'md')) { 
     // Reset the min-height here, because we no longer have the sticky search bar. 
     min-height: 450px; 
    } 

    @media 
    (max-width: map_get($grid-breakpoints, 'lg')), 
    (max-width: map_get($grid-breakpoints, 'lg')) and (orientation: landscape){ 
     background-color: lightgreen; 
    } 

    @media 
    (max-width: map_get($grid-breakpoints, 'md')), 
    (max-width: map_get($grid-breakpoints, 'md')) and (orientation: landscape){ 
     background-color: lightblue; 
    } 

    @media 
    (max-width: map_get($grid-breakpoints, 'sm')), 
    (max-width: map_get($grid-breakpoints, 'sm')) and (orientation: landscape){ 
     background-color: lightcoral; 
    } 
} 

EDIT: mỗi sự giới thiệu của @Godwin, tôi đơn giản hóa @media truy vấn của tôi như thế này:

main { 
    background-color: $mono-90; 
    height: 100%; 
    min-height: 1000px; 

    @media screen and (max-width: map_get($grid-breakpoints, 'md')) { 
     // Reset the min-height here, because we no longer have the sticky search bar. 
     min-height: 450px; 
    } 

    @media screen and (max-width: map_get($grid-breakpoints, 'lg')) { 
     background-color: lightgreen; 
    } 

    @media screen and (max-width: map_get($grid-breakpoints, 'md')) { 
     background-color: lightblue; 
    } 

    @media screen and (max-width: map_get($grid-breakpoints, 'sm')) { 
     background-color: lightcoral; 
    } 
} 

Tuy nhiên, nó không hoạt động trên iPad Landscape (1024x768). Tôi không muốn hiển thị trên Máy tính xách tay, nhưng làm muốn nó hiển thị trên iPad ở vị trí Cảnh quan.

Answer 1

Tuy nhiên, nó không hoạt động trên iPad Landscape (1024x768). Tôi không muốn nó hiển thị trên Máy tính xách tay, nhưng muốn nó hiển thị trên iPad ở vị trí Cảnh quan.

Tôi không chắc chắn những gì bạn đang xác định bởi nó vì bạn đang không hề giấu giếm bất cứ điều gì trong ví dụ của bạn vì vậy tôi sẽ đề cập đến:

Những gì tôi đang cố gắng để làm , cuối cùng, có các kiểu được áp dụng khi người dùng ở chế độ ngang trên máy tính bảng hoặc điện thoại.

Orientation on MDM được định nghĩa như sau:

Giá trị này không tương ứng với định hướng thiết bị thực tế.

Nó chỉ cho biết chế độ xem có ở chế độ ngang (màn hình rộng hơn chiều cao) hoặc dọc (chế độ hiển thị cao hơn chiều rộng).

Bạn cho biết iPad của mình ở chế độ ngang có độ phân giải 1024x768, vì vậy để nhắm mục tiêu iPad hoặc điện thoại ở chế độ ngang, bạn có thể đặt truy vấn phương tiện truyền thông nhắm mục tiêu tất cả các thiết bị có chiều rộng tối đa 1024px và đang ở chế độ ngang hiển thị rộng hơn chiều cao):

main { 
    background-color: grey; 
    height: 100%; 
    min-height: 1000px; 
    width: 100%; 

    @media screen and (max-width: 1024px) and (orientation: landscape) { 
    background-color: lightblue; 
    } 
} 

Bạn có thể kiểm tra ví dụ trên this codepen.

Nếu chế độ xem của bạn có chiều rộng lớn hơn 1024px, phần tử main sẽ có màu xám bất kể là gì.

Nếu bạn thay đổi kích thước cửa sổ trình duyệt của bạn để có một khung nhìn có chiều rộng bằng hoặc ít hơn 1024px, và có một khung nhìn được xem xét trong bối cảnh (màn hình rộng hơn đó là cao), ví dụ một chiếc iPad trong chế độ phong cảnh (1024x768), truy vấn phương tiện truyền thông sẽ kích hoạt và áp dụng một nền màu xanh:

Nếu bạn thay đổi kích thước cửa sổ trình duyệt của bạn để vẫn có một khung nhìn với một với bằng hoặc ít hơn 1024px nhưng có một chiều cao lớn hơn chiều rộng của bạn, chế độ xem không còn là consi nữa dered được trong chế độ phong cảnh nhưng chuyển sang chế độ chân dung. Tại thời điểm này, truy vấn phương tiện truyền thông không còn được kích hoạt và chúng tôi dự phòng để một yếu tố màu xám:

Vì vậy, liên quan đến câu hỏi của bạn, ví dụ là một truy vấn phương tiện truyền thông để áp dụng phong cách cho người dùng sử dụng một viên thuốc hay điện thoại ở chế độ ngang.

Answer 2

Dưới đây là một giải pháp .Hope này sẽ làm việc cho bạn

main { 
 
    background-color: grey; 
 
    height: 100%; 
 
    min-height: 1000px; 
 
} 
 
     
 
    @media (max-width: 992px) and (orientation:portrait) { 
 
\t \t main{ 
 
     background-color: red 
 
\t \t } 
 
    } 
 

 
    @media (max-width: 768px) and (orientation:portrait) { 
 
\t \t main{ 
 
     background-color: lightcoral 
 
\t \t } 
 
    } 
 
@media (max-width: 992px) and (orientation: landscape) { 
 
\t \t main{ 
 
     background-color: lightgreen; 
 
\t \t } 
 
    } 
 

 
    @media (max-width: 768px) and (orientation: landscape) { 
 
\t \t main{ 
 
     background-color: lightblue; 
 
     min-height: 450px; 
 
\t \t } 
 
    }

<main> 
 
    <h1>Page Title</h1> 
 
    <h2>Some Descriptive information</h2> 
 

 
    <div>Content</div> 
 
</main>