当视口变窄时使 div 变宽

Question

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

我知道您也可以使用 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
            }
        }

当视口变窄时使 div 变宽

Make div wider when viewport get less wide

viewport

viewport-units