Acho que não tem uma resposta única para sua pergunta. Boa parte dela pode ser tratada com essa outra pergunta Qual a diferença entre "Css resolution" e "Pixel resolution" onde vc pode ver melhor como é a diferença de telas de alta e baixa densidade e de como podemos tratar o CSS usando regras de media queries como
@media (min-resolution: 2dppx) { ... } /* regra css para telas com 2x a densidade de pixel */
@media (min-resolution: 3dppx) { ... } /* regra css para telas com 3x a densidade de pixel */
Outra parte da resposta pode estar baseada em conceitos tipográficos e de UX, onde algumas boas práticas pode ser seguidas. Como não tem linhas de texto muito longas, por exemplo uma linha de texto com mais de 14 palavras, ou um inputs muito largo, mas que o usuário vai inserir apenas alguns pouco caracteres.
O ideal é que se tenha até 14 palavras por linha. Mas como vc vai tratar isso em um monitor que tem 2.500px de largura? Provavelmente vc vai precisar "partir" o texto em 2 colunas ou mais.

Outro ponto é que normalmente no desktop se está perto da tela, no mobile mais perto ainda então o font-size
não precisa ser tão grande. Já em uma tela de apresentação ou TV vc já está bem longe e o font-size
precisa ser tratado, independente da resolução da tela.

Sobre as imagens o ideal é que use o SRCSET
https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Multimedia_and_embedding/Responsive_images
<img srcset="imagem-320w.jpg 320w,
imagem-480w.jpg 480w,
imaem-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="imagem-800w.jpg" alt="">

Para o Bootstrap seria algo como isso
1 - Se vc estiver usando Bootstrap com o Grid padrão vc teoricamente precisaria das imagens nessas resoluções. Aqui tem a documentação oficial: https://getbootstrap.com/docs/4.0/layout/grid/
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
2 - Para carregar as imagens com cada uma das resoluções do grid ficaria algo parecido com isso:
<picture>
<source media="(min-width: 576px)" srcset="suaimagem-sm.png"/>
<source media="(min-width: 768px)" srcset="suaimagem-md.png"/>
<source media="(min-width: 992px)" srcset="suaimagem-lg.png"/>
<source media="(min-width: 1200px)" srcset="suaimagem-lx.png"/>
<img src="suaimagem-md.png" alt="">
<picture>
Outra opção seria vc ter uma folha de estilo para mobile.css e uma para desktop.css, e identificando o tipo de dispositivo de acesso por JS vc usa uma folha ou outra. Uma opção tb é usar direto pelo atributo media
do link
do css.
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)" />
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 769px)" />
Mas isso nessa técnica se o dispositivo for mobile, mas tiver mais de 768px
de largura, o usuário vai acabar carregando a folha desktop.css
mesmo estando no celular... Etão uma abordagem reconhecendo o user-agent
do dispositivo pelo JS seja melhor.
Uma coisa que pode ajudar é tentar fazer Media Queries
que peguem a orientação do dispositivo se é portrait
ou landscape
.
E o Seu @media
ficaria algo como isso por exemplo:
@media all and (orientation: portrait) { ... }
@media (min-width: 700px) and (orientation: landscape) { ... }

Vc pode ler mais sobre CSS e a orientação do dispositivo aqui: https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries#orientation
Ponto de Quebra
Sobre os "Breaking Points" (pontos de quebra do layout) nem o Google ou a Mozilla fazem referencias a isso em suas documentações. Na verdade o que eles recomendam e o usa da Meta Viewport
e tratar o layout de forma que seja responsivo e acessível.
Seguem links oficiais com as boas praticas.
Também não exite muito consenso entre os FrameWorks de Design System mais famosos como Bootstrap, Materialize e Foundation!
Repare abaixo que cada um deles determina uma largura diferente para os Breaking Points
do Grid
que usam.
Bootstrap3 Breaking Points

Bootstrap4 Breaking Points

Materialize Breaking Points

Foundation Breaking Points

E para finalizar aqui vai um excelente artigo sobre os tamanhos de tela mais usados atualmente, os dados são de Dezembro de 2017. Artigo: https://www.hobo-web.co.uk/best-screen-size/
Telas Desktop
- 1366×768 – 29.25%
- 1920×1080 – 17.34%
- 1440×900 – 7.32%
- 1600×900 – 5.72%
- 1280×800 – 5.27%
- 1280×1024 – 4.51%

Telas Mobile
- 360×640 – 41.11%
- 375×667 – 9.58%
- 720×1280 – 5.16%
- 320×568 – 4.55%
- 414×736 – 3.79%
- 320×534 – 3.46%

Telas Tabler
- 768×1024 – 57.99%
- 1280×800 – 5.89%
- 600×1024 – 4.6%
- 601×962 – 3.02%
- 800×1280 – 2.94%
- 1024×600 – 2.36%

Fonte: http://gs.statcounter.com/screen-resolution-stats/tablet/worldwide
OBS: Sempre considere o seu público alvo e a experiencia do usuário antes de começar o desenvolvimento!
Não sei se toquei em todos os pontos, mas acredito que tenha algo para te dar uma luz.