列表和容器的响应和兼容的 css [关闭]

Question

假设我有这个结构：

<div class="container">
    <h1>demo</h1>
    <div class="listOfSomething">
        <ul>...</ul>
    </div>
</div>

我想做的是：

1. 尽我所能做出响应。 所以我试图给“容器”一个 90% 的宽度，但是 - 如果我没有父级的绝对宽度，我如何居中“listOfSomething”？ 我还希望列表可以滚动。如何使列表高度成比例？例如 - 对于 pc，它将是 height:500px，但对于移动网络，它将是 height:100px，如果你明白我的意思的话。
2. 让它看起来适合多个设备。例如 - 如果它位于 PC 网络或移动设备中，请进行一些不错的更改。

请！只给我展示活生生的例子（比如在 jsfiddle 中），而不是仅仅解释 - 这样我就可以立即使用它:) 非常感谢！

Answer 1

这可以通过媒体查询概念来实现。我已经为此创建了一个小提琴。

小提琴：http://jsfiddle.net/7q17rwvd/1/

.container { width: 100%; text-align: center; }
/* Mobile Media Queries Start */
@media (max-width: 767px) {
.listOfSomething { height: 100px; overflow: auto; }
}
/* Tablet Media Queries Start */
@media (min-width: 768px) and (max-width: 1024px) {
    .listOfSomething { height: 100px; overflow: auto; }
}
/* Desktop Media Queries Start */
@media (min-width: 1025px) {
    .listOfSomething { height: 100px; overflow: auto; }
}

Answer 2

JsFiddle Example

CSS：

.container{
    border: 1px solid black;
    padding: 10px;
}

.listOfSomething{
    border:1px solid red;
    text-align:center;
    overflow-y:auto;
}
@media all and (max-width: 300px) {
    .listOfSomething {
        height: 100px;
    }
}

调整浏览器窗口的大小（逐渐减小宽度）以查看小屏幕分辨率的渲染。 在 300 像素以下，列表高度会降低，如下图所示：