當視口變得更寬時使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 
      } 
     }