Question

我希望实现的是剩下1个占用最少300px的屏幕，或者如果屏幕大25％，它旁边我希望放置另一个占用屏幕其余部分的div在那些2之间添加第三个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) {}

使div占用基于％和px的剩余宽度

1 个答案: