Do jakich rozdzielczości dopasować style?

Chciałbym style swojej strony dopasować do różnych rozdzielczości. Nie wiem jakich. O to kod styl.css :

  @media only screen and (max-width: 2000px) {
  }
  @media only screen and (max-width: 1000px) { 
  }
@media only screen and (max-width: 680px) {    
} 

Proszę o pomoc. Jak mogę go zmienić? Jak powinienem?

Najlepiej potestować na różnych rozdzielczościach na różnych urządzeniach (albo przynajmniej na widoku mobilnym w dev toolsach).
I @media to jedno narzędzie do RWD, ale nie jedyne (np. możesz nie ustawiać szerokości elementu w pikselach, ale w procentach czy vh/vw itp. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design ).

Poza tym rozdzielczość często może być i tak zeskalowana, bo urządzenia albo same się skalują (udają, że mają mniejszą rozdzielczość) albo stronę skalują i też udają, że mają np. 980 pikseli szerokości (chyba, że dasz np. <meta name="viewport" content="initial-scale=1.0">
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag )

W każdym razie takie rzeczy ustawia się pod konkretną stronę, nie ma jakiejś złotej recepty. Niektóre strony będą wyglądać dobrze na różnych urządzeniach bez specjalnych działań, inne będą wymagały jakichś specjalnych obejść, żeby strona wszędzie dobrze się wyświetlała.

Poza tym tu masz listę rozdzielczości komórek:
https://experienceleague.adobe.com/docs/target/using/experiences/vec/mobile-viewports.html?lang=en
tu widać, że device resolution jest większa, ale komórki udają, że mają np. 2 razy mniejszą rozdzielczość (tzw. pixel ratio). Czyli niczego nie można być pewnym.

różne są szkoły :)
Niektórzy stosują max-width: 1000px dla mobile oraz min-width: 1001px dla desktop oraz ewentualnie jak jest potrzeba jakieś niuanse dla mobile dla max-width: 600px

darkonepl napisał(a):

różne są szkoły :)
Niektórzy stosują max-width: 1000px dla mobile oraz min-width: 1001px dla desktop oraz ewentualnie jak jest potrzeba jakieś niuanse dla mobile dla max-width: 600px

Ogólnie rzecz biorąc strona powinna być przygotowana dla rozdzielczości ekranów od 320px do 4k...
Rozróżnianie na wersję mobilną i desktop już dawno straciło sens. Mamy masę laptopów z rozdzielczością 1280px. Jak ktoś ma jeszcze w systemie skalowanie ustawione na 125% to strona zachowuje się jak na ekranie 1024. Z drugiej strony telefony mają tak duże rozdzielczości i rozmiary, że strona wyświetlana w układzie horyzontalnym może mieć 1440px i też będzie wyglądała dobrze. Masz też telefony typu Samsung Fold, które mają duży rozkładany ekran i można go śmiało traktować jako mały desktop.