如何讓這個CSS圖形響應，只要其容器已經響應？

我想建立一個使用純CSS的監視器設計。目前，我有這樣的：如何讓這個CSS圖形響應，只要其容器已經響應？

它看起來不錯，但如果你玩的屏幕尺寸，設計本身不響應。它的父容器響應，感謝Skeleton。

現在，我想要做的這些事情：

使設計反應迅速，適合任何屏幕尺寸。
保持屏幕的寬高比。這是主要問題。我嘗試了寬度爲100％的東西，但是，如果沒有固定的高度，事情就不會起作用。
最後，我想讓顯示器底座連線，也就是說，我希望梯形只有邊框而不是填充顏色。

任何幫助，非常感謝！

我的代碼：

HTML

<body> 
    <div class="container"> 
      <div class="monitor-container"> 
       <div class="monitor-top"> 
        <div class="screen-content"> 

        </div> 
       </div> 
       <div class="monitor-base"> 
       </div> 
      </div> 
     </div> 
</body>

CSS

.monitor-container { 
       margin: 25px; 
       padding: 25px; 
       border: 1px solid #000; 
      } 
      .monitor-top { 
       margin: auto; 
       width: 400px; 
       height: 250px; 
       border: 1px solid #000; 
       border-radius: 5px; 
      } 

      .screen-content { 
       margin: 25px; 
       width: 350px; 
       height: 200px; 
       border: 1px solid #000; 
       border-radius: 5px; 
      } 

      .monitor-base { 
       margin: 0 auto; 
       border-bottom: 50px solid black; 
       border-left: 25px solid transparent; 
       border-right: 25px solid transparent; 
       height: 0; 
       width: 100px; 
       border-radius: 5px; 
      }

爲樣板，我使用這些：

https://raw.githubusercontent.com/dhg/Skeleton/master/css/normalize.css

https://raw.githubusercontent.com/dhg/Skeleton/master/css/skeleton.css

來源

2016-06-10 Tahmid Khan Nafee

這個問題要麼太寬泛，基於觀點或需要討論，所以是堆棧溢出的主題。如果您有特定的，可回答的編程問題，請提供完整的詳細信息。 –

這種方式https://jsfiddle.net/stngL8hc/1/ ...你可以嘗試使用％和填充以保持方面 – DaniP

要做到你需要把另一梯形過頂給有線效果梯形。你用邊框完成它的方式本身不能被用來獲得有線的感覺。

加入這一行

<div class="monitor-base"> 
     **<div class="mb2"> 
     </div>** 
      </div>

和CSS這樣

.mb2 { 
     position:relative; 
     left:-22px; 
     top:2px; 
      margin: 0 auto; 
      border-bottom: 45px solid white; 
      border-left: 22px solid transparent; 
      border-right: 22px solid transparent; 
      height: 0; 
      width: 100px; 
      border-radius: 5px; 
     }

有有線的效果。

寬高比是你需要使用JavaScript預處理器的東西，我認爲，在香草CSS我不認爲有可能保持長寬比作爲高度和寬度是獨立的，但在SCSS或更少你可以把它們綁在一起。我認爲。

來源

2016-06-10 16:51:23

如何讓這個CSS圖形響應，只要其容器已經響應？

回答

相關問題