Twitter Bootstrap - Cách thay đổi lớp css dựa trên độ rộng được xác định @media

Question

Đây là câu hỏi đầu tiên của tôi ở đây, nhưng tôi chỉ muốn nói rằng trang web này đã giúp tôi vô số lần trong những năm của tôi. Tôi đoán tôi đã đến giai đoạn mà tôi có câu hỏi của riêng mình để hỏi!

Xin lỗi nếu câu hỏi không rõ ràng, tôi sẽ cố gắng xây dựng: Tôi đã chỉ định chuyển đổi cho một số yếu tố của mình, để khi chúng được di chuột lên trên chúng (ví dụ: .example:hover {margin-top: -25px}).

Bạn có thể xem nơi tôi đã áp dụng điều này trên trang this.

Di chuột qua các phần tử bên dưới hộp cảnh báo "Sắp ra mắt" (ví dụ: "Thiết kế hoàn hảo Pixel", "Mã làm sạch đẹp" & "Hơn 5 năm kinh nghiệm").

Tất cả hoạt động tốt, tuy nhiên bạn sẽ nhận thấy rằng khi cửa sổ trình duyệt được kích thước lại đủ nhỏ để các phần tử được xếp chồng lên nhau theo chiều dọc (tôi tin đây là @media (max-width: 767px)), hiệu ứng di chuột có vẻ không sạch. Tôi muốn xóa hoàn toàn hiệu ứng khi trang web được hiển thị theo cách này (dành cho thiết bị di động).

Câu hỏi đặt ra là làm cách nào để thay đổi thuộc tính của lớp dựa trên chiều rộng của trình duyệt? Tôi muốn loại bỏ lề trên khi di chuột khi được hiển thị cho thiết bị di động (ví dụ: < 767px) nhưng giữ nó ở đó khi được xem bình thường.

Cảm ơn

Answer 1

Chỉ một điều nhỏ mà bạn phải thêm.

@media (max-width: 767px) { 
    .shift:hover { 
    margin-top: 0; 
    } 
} 

Một điều nữa nếu làm việc trên các thiết bị nhỏ lợi ích khi sử dụng thuộc tính chuyển tiếp là gì vì chúng tôi không muốn thay đổi/hiệu ứng trên chế độ xem này. Vì vậy, hãy thêm tính năng này cũng để hiển thị nhanh trên trình duyệt dành cho thiết bị di động.

@media (max-width: 767px) { 
    .shift { 
    transition:none; 
    -webkit-transition:none; 
    -moz-transition:none; 
    } 
} 

Answer 2

Chỉ cần quấn quy tắc CSS tương ứng với @media như thế này:

@media (min-width: 768px) { 
    .example:hover { 
     margin-top: -25px; 
    } 
} 

Lưu ý rằng tôi đang sử dụng min-width - điều này không bao gồm sự cai trị từ "điện thoại" xem.

Answer 3

Các sytling đến từ docs.css, nơi bạn có:

.shift:hover { 
margin-top: 40px !important; 
} 

Như @dequis ghi chú khác, @media truy vấn là con đường để đi. Do hiệu ứng di chuột không hoạt động tốt khi 3 cột được xếp chồng lên nhau trên màn hình thiết bị di động, bạn có thể loại bỏ chuyển tiếp theo chiều dọc và thay thế bằng chuyển đổi theo chiều ngang, giống như sau được thêm vào docs.css:

@media (max-width: 767px) { 
.shift:hover { 
margin-top: 0 !important; /* it's possible this might need some fine-tuning */ 
margin-right: -20px; 
} 

} 

Có thể điều này có thể cần một số chỉnh sửa khi nó được đặt đúng chỗ, nghĩ rằng sẽ dễ dàng nếu cần.

Chúc may mắn!