Czy ktoś może wyjaśnić zapytania dotyczące mediów CSS?

Question

Przeczytałem artykuł na ich temat pod adresem css3.info, ale nie sądziłem, że wyjaśni to wystarczająco dobrze. Nie mogłem również zmienić ich przykładów za pomocą rozmiaru ekranu. Próbowałem w Safari, FF, Chrome.

Czy jest to funkcja, która nie jest jeszcze gotowa do implementacji?

Jeśli chcę dostosować niektóre style, gdy okno przeglądarki ma mniej niż 1024 pikseli. Jak mogę to zrobić?

Answer 1

Zasada stosowana w rozmiarze ekranu oznacza, że ​​podając W3C specyfikacji „nadaje się do użycia w urządzeniach przenośnych ekranu, jeżeli szerokość wziernika jest” w podanych ograniczeń.

http://www.w3.org/TR/css3-mediaqueries/

Jeśli chcesz, aby dostosować styl gdy rzutnia jest mniej niż 1024px można użyć tej reguły:

@media screen and (max-width: 1024px) { … } 

każdym razie zasada ta ma zastosowanie jedynie do rzutni rzeczywistego rozmiaru. Jeśli zmienisz rozmiar rzutni bez ponownego ładowania strony, style nie zostaną zastosowane.

Answer 2

Aby zastosować arkusz stylów do dokumentu, gdy wyświetlane na ekranie większym niż 800 pikseli szerokości:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" > 

Aby zastosować arkusz stylów do dokumentu, gdy wyświetlane na dowolnym urządzeniu mniej niż 400 pikseli szerokości:

<link rel="stylesheet" media="all and (max-device-width: 400px)" > 

wewnątrz

@media all and (max-width:800px) { 
    body { color: red; } 
} 

dla iPhone

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

:: combining media query

Answer 3

Aby zobaczyć, jak różne zapytań o media reagują na zmiany rozmiaru lub zmiana orientacji, spróbuj demo na tej stronie:

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

Można dostosować zapytania mediów atrybuty poczuć, jak wpływają one na stronę .

Answer 4

Oto kilka projektów, które rozwiązują ten problem i są na czele dynamicznych css i przekątnej ekranu:

• 320 and up:

  '320 i UP zapobiega urządzeń mobilnych od pobieranie zasobów pulpitu przez przy użyciu arkusza stylów dla małego ekranu jako jego początkowy punkt, jako .

• Lessframework:

  Mniej ramowa jest system siatki CSS projektowania adaptacyjnych stron internetowych.To zawiera 4 układy i 3 zestawy predefiniowanych ustawień typografii , wszystkie oparte na pojedynczej siatce .