en
new
Avatar
hieu nguyen
Asked Jan 16th, 2020 4:01 a.m.
Asked Jan 16th, 2020 4:01 a.m.• 792 0 5
  • 792 0 5
+1

lỗi về responsive @media

CSSSCSSResponsive
Share
  • 792 0 5

Mình bị lỗi về responsive @media. Khi @media trên 900px thì nó nhận css, nhưng khi @media nhỏ hơn thì k nhận css. Đã có bác bào bị chưa, cảm ơn các bác giúp đỡ.

Avatar
hieu nguyen @hieuhumg
28 0 26 1
Avatar Vương Minh Thái @vuongthai95
•
Jan 16th, 2020 4:14 a.m.

Bạn có thể show code lên không ? ví dụ như thế này thì đoạn css bên trong @media của bạn chỉ nhận khi kích thước màn > 900px thôi

@media only screen and (min-width: 900px){
  .image{
      display: none;
  }
}
+2
| Reply
Share
Add a comment

5 ANSWERS

Avatar
Nguyễn Văn Quy
Answered Jan 17th, 2020 7:02 a.m.
Answered Jan 17th, 2020 7:02 a.m.
+1

@media only screen and (min-width: 900px){ // }

Với cấu hình như này, css sẽ hoạt động trong phạm vi màn rộng từ 900px trở lên.

Còn cấu hình như dưới, css sẽ hoạt động trong phạm vi màn rộng từ 900px trở xuống.

@media only screen and (max-width: 900px){ // }

Share
Avatar
Nguyễn Văn Quy @ruacondepzaj
8.9K 300 0 36
Add a comment
Avatar
Dương Mạnh Hoàng
Answered Jan 16th, 2020 4:04 a.m.
Answered Jan 16th, 2020 4:04 a.m.
0

Tức là bạn viết reponsive cho màn dưới 900px nó không nhận? Có thể đang có đoạn code nào đó đè lên chăng, bạn thử bật f12 lên xem thử đi

Share
Avatar
Dương Mạnh Hoàng @duong.manh.hoang
2.1K 76 0 87
Add a comment
Avatar
Cảnh Sát Chính Tả
Answered Jan 16th, 2020 4:07 a.m.
Answered Jan 16th, 2020 4:07 a.m.
0

tốt nhất để đảm bảo chắc chắn thì bạn chia màn hình ra một số cỡ phổ biết rồi @media theo từng cái một, như các Boostrap làm a

Share
Avatar
Cảnh Sát Chính Tả @hongquanfit
2.2K 58 1 76
Add a comment
Avatar
hai dang pham
Answered Jan 17th, 2020 6:11 a.m.
Answered Jan 17th, 2020 6:11 a.m.
0

Bác bật f12 lên xem nó nhận đúng class và css các kiểu chưa, nếu nhận rồi mà nó bị gạch ngang ở các đoạn css đó thì bác có thể thêm thuộc tính !important

Share
Avatar
hai dang pham @dangpham
540 8 0 1
Add a comment
Avatar
Anh Tuan
Answered Mar 19th, 2021 9:40 a.m.
Answered Mar 19th, 2021 9:40 a.m.
0

bạn thêm link <meta name="viewport" content="width=device-width, initial-scale=1"> này vào chưa

Share
Avatar
Anh Tuan @anhtuan1
0 0 0 1
Add a comment
Viblo
Let's register a Viblo Account to get more interesting posts.
Register