Nhập truy vấn CSS Media trong Công cụ dành cho nhà phát triển Chrome

Question

Nhấn F12 Tôi có thể thay đổi ngay lập tức CSS của các phần tử trong Chrome. Tuy nhiên, tôi không thể màn hình @media đầu vào và (max-width) tương tự như ở đây:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Khi tôi nhấn enter nó chỉ đơn giản biến mất. Tôi có thể làm gì để tự động thêm và xóa truy vấn phương tiện?

Answer 1

Khi bạn chỉnh sửa phong cách cho một yếu tố cụ thể trong thanh tra, nó là như thể bạn đang chỉnh sửa nội tuyến style thuộc tính của phần tử: bạn chỉ có thể đặt tờ khai tài sản như color: red trong ví dụ của bạn. Điều này thậm chí còn được phản ánh trong chính trực quan hóa DOM khi bạn chỉnh sửa kiểu của phần tử. Truy vấn phương tiện không thuộc về kiểu nội tuyến, chúng thuộc về các quy tắc @media chỉ xuất hiện trong biểu định kiểu thích hợp.

Trên Chrome, bạn cần phải chỉnh sửa biểu định kiểu thanh tra trực tiếp để bao gồm truy vấn phương tiện của mình. Bạn có thể tiếp cận nó bằng cách đi tới bảng điều khiển Nguồn và chọn thanh kiểm tra-biểu định kiểu.

Vì điều này liên quan đến việc viết CSS, bạn sẽ cần phải chọn phần tử. Bạn có thể (thường) có một bộ chọn CSS duy nhất cho phần tử bạn chọn bằng cách kích chuột phải vào phần tử trong bảng Elements và chọn Copy CSS path.

Sau đó chỉ cần viết CSS của bạn:

@media screen and (max-width: 300px) { 
    /* selector for your element */ { color: red; } 
} 

Answer 2

Bạn luôn có thể thêm CSS trong thẻ style trong phần đầu. Chỉ cần chỉnh sửa HTML bằng cách nhấp chuột phải vào html và chọn "Chỉnh sửa dưới dạng HTML". Ví dụ,

<style> 
    @media screen and (min-width: 0px) and (max-width: 400px) { 
     body { 
      background-color: red; 
     } 
    } 
    @media screen and (min-width: 401px) and (max-width: 599px) { 
     body { 
      background-color: green; 
     } 
    } 
    @media screen and (min-width: 600px) { 
     body { 
      background-color: blue; 
     } 
    } 
</style> 

Answer 3

tôi đã cùng một vấn đề và cuối cùng đã tìm ra rằng khi tôi đang bước vào ví dụ:

@media (max-width: 767px) 
.col-sm-3 { 
    width: 75%; 
} 

kích thước màn hình của tôi thực sự là hơn 767px. Vì vậy, khi tôi nhấn Enter, nó biến mất và dường như không hoạt động. Nhưng những gì tôi nhận ra là khi tôi điều chỉnh kích thước màn hình của trình duyệt của tôi xuống dưới 768px, tôi thấy truy vấn phương tiện trong các kiểu.