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

Widziałem wiele witryn, które reagują zarówno na przeglądarki komputerów stacjonarnych, jak i przeglądarki na telefony komórkowe, pracuję nad witryną i mam następujące ustawienia arkusza stylów: (Witryna Hicks Design jest dobrym przykładem tego, co chcę osiągnąć, jeśli taki jest potrzebny) )

/* 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 wydaje się działać tylko na przeglądarkach komputerowych. (przetestowane z Android Firefox i domyślną przeglądarką Android na Sony Xperia Ray)

Reguły strony projektu Hicksa są bardzo podobne do moich, jednak używają min i max, ale dla mnie nie działa na przeglądarkach mobilnych i komputerowych. (Planuję zoptymalizować moje zapytania o media więcej, staram się tylko, aby podstawy działały tak, jak tego chcę).

Jeśli używam max-device-width zamiast max-width, to staje się ono aktywne w przeglądarkach mobilnych, ale nie w przeglądarkach desktopowych ...

Próbowałem rozwiązać następujące problemy:

@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ę, aby którykolwiek z nich był poprawny, ponieważ narzekanie na pasek narzędzi programistycznych dla Firefoksa narzeka. Wypróbowałem też kilka odmian powyższych reguł, ale wciąż nie mogę go uruchomić.

Z tego, co rozumiem, max-width odczytuje szerokość rzutni (powiedzmy .. szerokość okna przeglądarki), a max-device-width odczytuje rzeczywistą szerokość ekranu, którego używasz do przeglądania strony. - Jestem zdezorientowany, dlaczego maksymalna szerokość nie wygląda na szerokość przeglądarki w telefonie komórkowym.

Myślę, że prawdopodobnie brakuje mi tutaj czegoś oczywistego na temat zapytań o media ... Wydaje się, że nie ma sensu, że jeśli chcę, aby moja strona reagowała na przeglądarki na komputery i telefony komórkowe, muszę zrobić kopię wszystkich moich zapytań o media i po prostu zmienić zapytanie z 'screen i (max-width)' do 'screen i (max-device-width)' lub odwrotnie. (czego wstydzę się nawet wpisać jako obejście tutaj)

Jak mogę połączyć reguły (max-width) i (max-device-width) lub jak to osiągnąć?

Jeśli wolisz nie czytać wszystkich powyższych:

Używam ekranu @media i (max-width: 480px), ale wydaje się, że jest to tylko ekran @media i (max-device-width: 480px) działa na telefonach komórkowych. Jak mogę połączyć obie te zasady, aby uzyskać responsywny projekt na przeglądarkach mobilnych i komputerowych?

questionAnswers(2)

yourAnswerToTheQuestion