如何在所有屏幕尺寸中放入此视图;基于百分比或基于网格

Question

我有一个顶部条带，我必须使用什么方法？

表格或网格或百分比。 并编写媒体查询进行字体优化？ 任何基于百分比的css框架？

无论屏幕大小和分辨率如何，我都需要在没有滚动的屏幕上显示它。

感谢您的支持。

Answer 1

你想要一个像这样的结构：

   
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>