我怎样才能使这个视图适应所有屏幕尺寸；基于百分比或基于网格

Question

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

Table 或网格或百分比。并为字体优化编写媒体查询？任何基于百分比的 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>

我怎样才能使这个视图适应所有屏幕尺寸；基于百分比或基于网格

How can I fit this view in all screen size; Percentage based or grid based

css

grid

screen

fullscreen

screen-resolution