html - 根据 % 和 px 使 div 占据剩余宽度

Question

我希望实现的是留下 1 个至少占据 300px 的空间，或者如果屏幕更大 25%，在它旁边我希望放置另一个 div，它将占据屏幕的其余部分，并带有选项在那些 2 旁边添加第三个 div，它将缩小中间的 div 以获得 25% 或最小 300px 的宽度；这是我创建的 div 示例:

.parents{
    width:25%;;
    min-width:300px;
    height:100%;
    background-image:url(img/background_parents.jpg);
    border-right:3px solid darkgray;
    overflow:auto;
}

现在，在这个 div 旁边，我需要 1 个宽度可调的面板，因为可以选择添加第三个面板，该面板的宽度与您在上面看到的面板的宽度相同。我可以用 jquery 做到这一点，但我想知道是否有通过 CSS 实现这一点的选项，因为我希望避开不断计算屏幕宽度的路线。

Answer 1

尝试使用媒体查询根据检测到的设备屏幕定义宽度。这是我通常的设置:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}