Recomendaciones ajuste de pantalla

En este código a continuación se expone una serie de recomendaciones para ajustar la resolución de la pantalla teniendo en cuenta la densidad de píxeles (DPI o PPI),

by InaWeb

HTML

<p>En lugar de utilizar unidades absolutas como píxeles, se recomienda usar unidades relativas como porcentajes, em o rem. Estas unidades permiten que el diseño se adapte mejor a diferentes resoluciones y tamaños de pantalla</p>

<div class="bg-image"></div>

<div class="image-high">Hola</div>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>

CSS

/*Utilizar Unidades Relativas*/
p{
font-size: 1em; /* Usar rem o em en lugar de px */
width: 50%; /* En lugar de usar píxeles absolutos */
}
.image-high{
     display:none;
}
    
.bg-image {
    background-image: image-set(url('https://picsum.photos/100/100') 1x, url('https://picsum.photos/200/200') 2x);
    background-repeat:  no-repeat;
    height:200px;
}

@media screen and (max-resolution: 72dpi) {
    /* Estilos para pantallas de alta resolución */
    .image-high{
     display:block;
    }
}