如何让这个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图形响应，只要其容器已经响应？

回答

相关问题