Thứ tự đặt Media Query

Các bạn cho mình hỏi khi viết style CSS mà có sử dụng @media (max-width: ....px) thì thứ tự đặt media sẽ là giá trị lớn lên trước, giá trị nhỏ sau đúng không nhỉ. Ví dụ:

@media (max-width: 1024px){
     .container {
         with: 80%;
         margin: "5px auto";
         padding: 5px
     }
}

@media (max-width: 768px){
     .container {
         with: 70%;
         margin: "10px auto";
         padding: 3px
     }
}

Chứ không được đặt ngược lại phải vậy không nhỉ ?

mocaret @teracom22

22 0 2 0

Thêm một bình luận

1 CÂU TRẢ LỜI

Bùi Huy Hoàng

Đã trả lời thg 8 5, 8:12 SA

Đã được chấp nhận

Nó còn tùy thuộc vào việc bạn sử dụng phương pháp nào mobile first hay desktop first

mobile first: bắt đầu bằng cách viết CSS cho các thiết bị di động trước, sau đó sử dụng media query để thêm các style cho các màn hình lớn hơn. Trong trường hợp này, bạn sẽ đặt media query với giá trị min-width từ nhỏ đến lớn.
desktop first: bắt đầu bằng cách viết CSS cho các màn hình desktop trước, sau đó sử dụng media query để thêm các style cho các màn hình nhỏ hơn. Trong trường hợp này, bạn sẽ đặt media query với giá trị max-width từ lớn đến nhỏ.

Bùi Huy Hoàng @BuiHuyHoang

2.7K 74 0 6

mocaret @teracom22

•

thg 8 5, 9:01 SA

@BuiHuyHoang cảm ơn bạn, trường hợp của mình đang dùng max-width thôi chứ không dùng min-width Vậy chúng ta có thể kết luận quy luật đúng khi sử dụng media:

min-with : các media sắp xếp theo thứ tự từ giá trị từ nhỏ đến lớn (nhỏ ở trên, lớn ở dưới)
max-width : các media sắp xếp theo thứ tự từ lớn đến nhỏ (lớn ở trên, nhỏ ở dưới)

Bùi Huy Hoàng @BuiHuyHoang

•

thg 8 5, 9:21 SA

Đúng vậy: lý do cho việc sắp xếp này là để tránh xung đột và đảm bảo rằng các quy tắc CSS được áp dụng đúng cách cho các kích thước màn hình khác nhau. CSS được đọc từ trên xuống dưới, và quy tắc cuối cùng sẽ được ưu tiên nếu có nhiều quy tắc cùng áp dụng.