如果它的容器已经响应，我如何使这个 CSS 绘图响应？答案

【问题标题】：How do I make this CSS drawing responsive, provided its container is already responsive?如果它的容器已经响应，我如何使这个 CSS 绘图响应？
【发布时间】：2016-06-10 16:21:11
【问题描述】：

我正在尝试使用纯 CSS 构建监视器设计。目前，我有这个：

CSS Monitor Design Fiddle

看起来不错，但是如果您使用屏幕尺寸，设计本身就没有响应性。感谢Skeleton，它的父容器是响应式的。

现在，我想做这些事情：

使设计具有响应性并适合任何屏幕尺寸。
保持屏幕的纵横比。这是主要问题。我尝试了诸如 width: 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

【问题讨论】：

这个问题要么过于宽泛，要么基于观点，要么需要讨论，因此与 Stack Overflow 无关。如果您有具体的、可回答的编程问题，请提供完整的详细信息。
这样jsfiddle.net/stngL8hc/1 ...您可以尝试使用 % 和填充来保持方面

标签： html css

【解决方案1】：

要制作梯形，您需要在顶部放置另一个梯形以产生有线效果。你用边框做的方式本身并不能用来产生一种有线的感觉。

添加这一行

<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 预处理器的东西，因为我认为在 vanilla css 中我认为不可能保持纵横比，因为高度和宽度是独立的，但是在 scss 或更少的情况下你可以把它们绑在一起。我想。

【讨论】：