当视口变窄时使 div 变宽

【问题标题】：Make div wider when viewport get less wide当视口变窄时使 div 变宽
【发布时间】：2015-08-20 19:45:42
【问题描述】：

是否可以让 DIV（设置为 width="40%"）随着视口（浏览器窗口）变窄而变宽？

我知道您也可以使用 40vw 而不是 40% 来在视口缩小时缩小 div，但我希望在视口变窄时让 div 变宽。

谢谢，艾迪

【问题讨论】：

您正在寻找“媒体查询”，它允许您根据视口大小（以及其他）应用不同的 CSS 规则
谢谢。需要一些基于窗口大小的媒体查询步骤，但效果很好。

标签： viewport viewport-units

【解决方案1】：

是的，你可以！

这些工具称为媒体查询，一旦达到特定分辨率或视口，它们有助于重新处理元素。

这是典型的元视口标签。这会相对于 css 样式设置浏览器布局视口。

 <meta name="viewport" content="width=device-width">

一旦你得到它..

        #div {
            // basic styles
        }

        @media all and (max-width: 600px) {
            #div {
                width: 40%;
                // extra styles for mobile
            }
        }

        @media all and (min-width: 600px) {
            #div {
                width: 60%;
                // extra styles for desktop
            }
        }

【讨论】：

谢谢。它需要一些（最小宽度）步骤，但效果很好。