Wprowadzanie zapytań o media CSS w Narzędziach dla programistów w przeglądarce Chrome

Question

Naciśnięcie klawisza F12 mogę błyskawicznie zmieniać elementy CSS w Chrome. Jednak nie, mogę wejście ekran @media oraz (max-width), podobnie jak tutaj:

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

Kiedy naciśnij enter to po prostu znika. Co mogę zrobić, aby dynamicznie dodawać i usuwać zapytania o media?

Answer 1

Podczas edycji stylów dla konkretnego elementu w Inspektorze, to tak jakbyś edycji inline atrybutu elementu style: można umieszczać wyłącznie oświadczeń majątkowych takich jak color: red w swoim przykładzie. Jest to nawet odzwierciedlone w wizualizacji DOM podczas edytowania stylów elementu. Zapytania o media nie należą do stylów śródliniowych, należą do reguł, które pojawiają się tylko w odpowiednim arkuszu stylów.

W przeglądarce Chrome należy bezpośrednio edytować arkusz stylów inspektora, aby uwzględnić zapytania o media. Możesz do niego dotrzeć, przechodząc do panelu Źródła i wybierając arkusz stylów inspektora.

Ponieważ wymaga to pisania CSS, musisz wybrać ten element. Możesz (zazwyczaj) uzyskać unikalny selektor CSS dla wybranego elementu, klikając go prawym przyciskiem myszy w panelu Elementy i wybierając opcję Skopiuj ścieżkę CSS.

Następnie wystarczy napisać CSS:

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

Answer 2

Zawsze można dodać CSS wewnątrz znaczników stylów w sekcji head. Po prostu edytuj HTML klikając prawym przyciskiem myszy na html i wybierz "Edytuj jako HTML". Na przykład,

<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

miałem ten sam problem i wreszcie zorientowali się, że kiedy wchodził na przykład:

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

mój rozmiar ekranu było faktycznie więcej niż 767px. Więc kiedy nacisnąłem enter, zniknęło i wydawało się, że nie działa. Ale zdałem sobie sprawę, że gdy dostosowałem rozmiar ekranu mojej przeglądarki do poniżej 768 pikseli, zobaczyłem zapytanie o media w stylach.