Zapytania o media - przeglądarka mobilna a przeglądarka stacjonarna

Question

Widziałem wiele stron, które reagują zarówno na przeglądarkę komputerową, jak i przeglądarki telefonów komórkowych, pracuję nad witryną i mam następującą konfigurację arkusza stylów: (Witryna Hicks Design jest dobrym przykładem co chcę osiągnąć, jeśli jej potrzebujesz)

/* Normal styles go here */ 

@media screen and (min-device-width:321px) 
{ 
    /* Styles */ 
} 
@media screen and (min-width:701px) 
{ 
    /* Styles */ 
} 
@media screen and (min-width:1025px) 
{ 
    /* Styles */ 
} 
@media screen and (min-width:2049px) 
{ 
    /* Styles */ 
} 

Jednak mój arkusz stylów działa tylko w przeglądarkach na komputery. (testowane z Androidem Firefox i domyślną przeglądarką Androida na Sony Xperia Ray)

Zasady serwisu Hicksa są bardzo podobne do moich, jednak używają min i max, ale albo dla mnie nie działa zarówno przeglądarki mobilne, jak i na komputery. (Planuję zoptymalizować zapytania dotyczące mediów więcej Próbuję tylko podstaw, aby działały tak, jak bym tego chciał w tej chwili).

Jeśli używam max-device-width zamiast max szerokości staje się wrażliwy na przeglądarek mobilnych, ale nie pulpitu przeglądarek ...

Próbowałem następujące następujące obejść ten problem:

@media screen and (max-width:480px), screen and (max-device-width:480px) 
{ 
    /* Styles */ 
} 

również:

@media screen and (max-width:480px), and (max-device-width:480px) 
{ 
    /* Styles */ 
} 

jednak nie sądzę, jedną z nich są poprawne jak pasek narzędzi Web developer for Firefox narzeka na niego. Próbowałem również kilka odmian powyższych zasad, ale nadal nie mogę go uruchomić.

Z tego co rozumiem, maksymalna szerokość oznacza szerokość okna (powiedzmy ... szerokość okna przeglądarki), a maksymalna szerokość urządzenia odczytuje rzeczywistą szerokość ekranu używanego do przeglądania strony. - Nie rozumiem, dlaczego maksymalna szerokość nie wydaje się czytać szerokości przeglądarki telefonu komórkowego.

Myślę, że prawdopodobnie brakuje mi czegoś oczywistego na temat zapytań o media tutaj ... Nie wydaje się, żeby to miało sens, jeśli chcę, aby moja strona reagowała na przeglądarki stacjonarne i mobilne, muszę zrobić kopię wszystkich moich mediów zapytań i po prostu zmień zapytanie z "ekranu i (maks. szerokość)" na "ekran i (maksymalna szerokość urządzenia)" lub na odwrót. (które wstydzę się nawet opisać jako obejście)

Jak mogę łączyć zasady (maksymalna szerokość) i (maksymalna szerokość urządzenia) lub w jaki sposób mogę to osiągnąć?

Jeśli nie chcesz czytać wszystkie powyższe:

używam @media ekran i (max-width: 480px), jednakże wydaje się tylko ekran i @media (max-device-width: 480px) działa na telefonach komórkowych. Jak mogę połączyć obie te zasady, aby uzyskać responsywny wygląd w przeglądarkach na komórki i komputery?

Answer 1

Istnieje wiele mediów tam, a jeśli chcesz, aby wybrać tylko przez jego właściwości, użyj all kluczowe:

@media all and (max-width:480px) 
{ 
    /* Styles */ 
} 

Edycja:

Kombajny zasady z lub:

@media all and (prop1:val1), all and (prop2:val2) 
{ 
    /* Styles */ 
} 

Kombajny zasady zi:

@media all and (prop1:val1) and (prop2:val2) 
{ 
    /* Styles */ 
} 

Answer 2

@media screen and (min-width:240px) and (max-width:480px), 
    screen and (min-device-width:240px) and (max-device-width:480px) 
{ 
    /* Styles */ 
} 

Rozwiązałem problem, poprzednie odpowiedzi pomogły mi w głosowaniu. Dzięki.