当视口变宽时，使div更宽

Question

当视口（浏览器窗口）变宽时，是否可以使DIV（设置为width =“40％”）的宽度增加？

我知道你也可以使用40vw，而不是40％，当视口大小缩小时使div缩小，但我希望div在视口变窄时变宽。

谢谢，艾迪

Answer 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
            }
        }