Question

理想情况下，我想要一个16-30em之间的可变宽度左面板和一个16em宽的右面板。当屏幕缩小到32em或更低时，我希望右面板在左下方流动。我希望这一切都保持一致。

我找到了几个并排的例子，但左边只有一个固定的宽度浮动它和可变的右面板，或者右浮动和一个左变量面板。我设法把一个外部控制div放在圆形的东西上，并使布局正常工作到我想要在右下方流动的位置（或者右边的左边 - 我不喜欢哪个）：

我尝试使用@media (min-width: 15em)并在那里嵌套了一些更改，因为基本上当屏幕小于.left:min-width + .right:min-width时我只需要取出浮动：右边的面板上，但没有似乎生效了（我不确定它是否应该在jsfiddle中，但它也不是我的真实例子。我不介意哪个面板弹出另一个但我只需要它适用于移动设备标准CSS - 我有其他的东西，当屏幕到达72ems等时，但我没有写那个：）

任何帮助都非常感激。

Answer 1

使用此媒体查询。

@media (max-width: 15em)
{
    .right {
         width: auto;
         float:none;
    }
}

Answer 2

enter code here此问题在Stackoverflow中提出：
What does @media screen and (max-width: 1024px) mean in CSS?
查看此页面：
http://www.w3schools.com/css/css_mediatypes.asp
所有浏览器和事件的媒体屏幕

 /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    /* Styles */
    }

    /* Smartphones (landscape) ----------- */
    @media only screen 
    and (min-width : 321px) {
    /* Styles */
    }

    /* Smartphones (portrait) ----------- */
    @media only screen 
    and (max-width : 320px) {
    /* Styles */
    }

    /* iPads (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
    /* Styles */
    }

    /* iPads (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
    /* Styles */
    }

    /* iPads (portrait) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) {
    /* Styles */
    }

    /* Desktops and laptops ----------- */
    @media only screen 
    and (min-width : 1224px) {
    /* Styles */
    }

    /* Large screens ----------- */
    @media only screen 
    and (min-width : 1824px) {
    /* Styles */
    }

    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }

Answer 3

根据Allan的回答，我更新了我的小提琴试图弄清楚我做错了什么

http://jsfiddle.net/Ph3S8/3/

我必须将浮点数和移动到媒体选择器中，如下所示：

@media (min-width:17em) {
    .right {
        float:right;
    }
    .left {
        margin-right:5em;
    }
}

出于某种原因，我不得不在选择器上添加2个em的填充或div的重叠。

无论如何我发布这篇文章作为对我原帖的澄清，Allan的回答比我的好。

浮动左，最大宽度和流量控制

3 个答案: