viewport - 当视口变窄时使 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
            }
        }