Yêu cầu thg 8 5, 7:34 SA 140 0 1
  • 140 0 1
0

Thứ tự đặt Media Query

Chia sẻ
  • 140 0 1

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ỉ ?

1 CÂU TRẢ LỜI


Đã trả lời thg 8 5, 8:12 SA
Đã được chấp nhận
+2

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ỏ.

Chia sẻ
Avatar 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)
Avatar 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.

Avatar mocaret @teracom22
thg 8 5, 9:44 SA

@BuiHuyHoang thanks bro =)))

Avatar Bùi Huy Hoàng @BuiHuyHoang
thg 8 6, 2:07 SA

@teracom22 nếu thấy câu trả lời của mình hữu ích thì cho mình 1 Accept cho câu trả lời đó nhé 😄

Avatar mocaret @teracom22
thg 8 14, 9:05 SA

@BuiHuyHoang oke bạnk

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí