Comment puis-je adapter cette vue dans toutes les tailles d'écran? Pourcentage ou basé sur la grille

Question

J'ai une bande supérieure et quelle approche dois-je utiliser?

Tableau ou grille ou pourcentage. et écrire une requête média pour l'optimisation de la police? Un cadre CSS basé sur un pourcentage? Indépendamment de la taille et de la résolution de l'écran, je dois l'afficher dans un écran sans défilement.

Merci pour votre soutien.

Answer 1

Vous voulez une structure comme ceci:

 
ul{ 
 
    list-style-type: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    width: 100%; 
 
} 
 

 
ul:after{ 
 
    clear:both; 
 
} 
 

 
ul li{ 
 
    padding: 10px; 
 
    width: 18%; 
 
    display:inline-block; 
 
} 
 
ul li div{ 
 
    border: 1px solid #000; 
 
}

<ul> 
 

 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 
    <li><div>Your Content</div></li> 
 

 
</ul>