Jaki jest "właściwy" logiczny sposób budowania dobrego, responsywnego projektu za pomocą CSS3?

Question

Tak więc zanurkowałem w "Responsywny design" i dobrze zrozumiałem, jak to działa. Są jednak dwie rzeczy, których potrzebuję, aby się rozejrzeć.

My „logiczny” sposób myślenia jest tak: Jeśli rozmiar ekranu jest mniejsza niż 320px, a następnie zrobić A, jeśli wielkość ekranu jest mniejsza niż 480px zrobić B.

@media only screen and (max-width: 320px) { Do one thing here} 
@media only screen and (max-width: 480px) { Do another thing here} 

Problem polega na tym, że css w max-width: 480px wpływa także jeśli szerokość ekranu jest mniejsza niż 320.

Kiedy patrzę na przykładach, widzę, że używasz coś takiego:

@media only screen and (min-width: 290px) {} 
@media only screen and (min-width: 544px) {} 
@media only screen and (min-width: 960px) {} 

to w zasadzie mówi to jest ekran większy niż 290px, zrób to i jeśli ekran jest większy niż 544px, zrób to. Ale dostanę ten sam problem tutaj. Kod w wersji min-width: 290px będzie również używany w każdym rozmiarze ekranu większym niż 290 pikseli.

Więc jedynym rozwiązaniem można myślę, że będzie działać tylko dla określonego zakresu ekranu, wykorzystuje to:

@media only screen and (max-width: 320px) {} 
@media only screen and (min-width: 321px), 
only screen and (max-width: 480px){} 
@media only screen and (min-width: 640px), 
only screen and (max-width: 481px){} 

Może ktoś mi doradzić w tej sprawie?

Patrząc na przykłady, widzę łup "zbędnego" kodu. Wiele z tego samego kodu jest powtarzana, po prostu mają różne wartości:

@media only screen and (max-width : 930px), 
only screen and (max-device-width : 930px){ 
    nav li a { 
     width: 25%; 
     border-bottom: 1px solid #fff; 
     font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; 
    } 

    nav li:last-child a, nav li:nth-child(4) a { border-right: none; } 
    nav li:nth-child(5) a { border-bottom: none; } 
} 

@media only screen and (max-width : 580px), 
only screen and (max-device-width : 580px){ 
    nav li a { 
     width: 50%; 
     font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; 
     padding-top: 12px; 
     padding-bottom: 12px; 
    } 

    nav li:nth-child(even) a { border-right: none; } 
    nav li:nth-child(5) a { border-bottom: 1px solid #fff; } 
} 

Dla dużych stron, mogę sobie wyobrazić, że to stworzy dużo kodu i dużych plików CSS.

Czy to staje się nowym standardem, ponieważ musimy pracować z elastycznym wzornictwem?

byłaby to opcja do zrobienia po ?: ​​

@media only screen and (min-width: 640px) { @import url("css/640.css");} 

Answer 1

Na początek wpisujesz nieco więcej kodu, niż jest to konieczne.

Na przykład:

@media only screen and (min-width: 321px), 
only screen and (max-width: 480px) { 

można też zapisać jako:

@media only screen and (min-width: 321px) and (max-width: 480px) { 

Nigdy nie powinno się powtarzać CSS wewnątrz zapytania mediów, cokolwiek, który jest ustawiony dla każdego rozmiaru ekranu, na przykład tle kolor lub rodzina czcionek powinna być ustawiona poza zapytaniem o media. Oznacza to, że jest napisany tylko raz i dotyczy wszystkich. Wewnątrz każdego zapytania o media powinien znajdować się tylko kod, który wpływa tylko na ten określony rozmiar. (np. szerokość, rozmiar czcionki, itp.)

Nie polecam importowania plików css i tym podobnych, wystarczy umieścić wszystko w jednym, z globalnymi stylami u góry, a następnie dopasować rozmiar ekranu do stylów wewnątrz zapytań o media pod spodem że. Nie zniechęcaj się dużymi plikami css, łatwiej i szybciej pobierz jeden plik 10kb, niż dziesięć plików 1kb.

Zrobiłem przykładowy plik .css, aby pokazać here. Zauważ, że stworzy to okropną stronę, po prostu ma pokazać ci, jak możesz kodować układ i gdzie się znajduje.

Powyższy przykład zakłada obsługę zapytań o media w przeglądarce. Bez niego strona spadłaby na dupę. Jeśli nie masz 100% pewności co do obsługi zapytań o media (i nie korzystasz z usługi Respond.JS), zalecamy umieszczenie witryny na komputery w stylach globalnych, a następnie nadpisanie jako niepotrzebne, aby zapewnić zastępstwo dla nieobsługujących przeglądarek

Answer 2

co napisałeś jest dość dużo sposobów, aby to zrobić. ale jak mówi BoltClock, masz wiele sposobów na stworzenie responsywnej witryny.

Altho, aby uniknąć "podwójnego" css, można również utworzyć główny plik CSS. Te rzeczy, które nie muszą się zmieniać w całej witrynie - bez względu na to, co ekranizują - trafiają do tego pliku. (na przykład twoja czcionka). Poza tym twoje pliki css rzeczywiście będą "ogromne" w zależności od tego, jak daleko chcesz się posunąć w trybie responsywnym.

Za udzielenie odpowiedzi na pytanie, czy będzie to nowy standard ... nadal zależy to od właściciela witryny, czy chce wesprzeć witryny przyjazne dla urządzeń mobilnych, czy nie.

Miałem nadzieję, że to trochę pomogło :) Powodzenia!