0
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ỉ ?
Add a comment
1 ANSWERS
+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-widthtừ 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-widthtừ lớn đến nhỏ.
@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)
Đú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.
@BuiHuyHoang thanks bro =)))
@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é 😄
@BuiHuyHoang oke bạnk
