css - 如何在所有屏幕尺寸上适应此 View ?基于百分比或基于网格-LMLPHP

我有一个顶部条,我必须使用什么方法?

表或网格或百分比。
并编写用于字体优化的媒体查询?
任何基于百分比的CSS框架?

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

感谢你的支持。

最佳答案

您需要这样的结构:




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>

关于css - 如何在所有屏幕尺寸上适应此 View ?基于百分比或基于网格,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45076131/

10-11 19:24
查看更多