Css 引导屏幕演示需要响应

看看这个 网站呢

这在桌面上看起来很棒。。我通常对响应性设计没有问题，但我能做些什么使其响应性更好

HTML

<div id="g-site1" class="col-xs-12 demo-container">
    <div class="same-s same-1">
        <img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/site1.jpg" alt="">
    </div>
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#site1"> <i class="fa fa-search-plus"></i>

    </button>
    <div class="same-s same-2">
        <img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/mac.png" alt="">
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="site1" tabindex="-1" role="dialog" aria-labelledby="site1Label" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content1">
            <div class="modal-body">
                <img class="img-responsive site" src="http://omarhabash.com/sites/assets/img/sites/site1.jpg" alt="">
            </div>
        </div>
    </div>
</div>

---

对于任何网格系统，最好将其与内容分开。俗话说，不要“砍掉核心”。以下是一个简化的开始：

.demo容器{
溢出：隐藏；/*仅演示--说明图像空白*/
}
麦克先生{
位置：相对位置；
边距：-5.3%-20.5%0-18.5%；/*仅演示-说明图像空白*/
}
.屏幕{
位置：绝对位置；
top:9%；/*仅演示--说明图像空白*/
右：17%；/*仅演示--说明图像空白*/
左：15.6%；/*仅演示--说明图像空白*/
身高：58%；
溢出：自动；
}

要消除

.screen

上的所有负边距和相应值，请将Mac图像裁剪到黑色边框。当然，您仍然需要更小的top、right和left值来允许Mac的帧显示在它周围

我也会用黑色填满Mac电脑的屏幕。这样就不需要如此完美地定位覆盖在上面的内容

---

给你

首先，我将从网格中剥离所有自定义宽度和高度，并按预期使用它。将内容放在网格中，并根据需要设置样式/大小。您的大多数元素将保持100%宽度，并受网格约束。：/i我正在尝试所有内容。。。似乎什么都不管用。一旦你开始编辑几行css，你就会看到我的问题。

.same-s {
    height: 160px;
    width: 100%;
    margin: 0 auto;
}
.same-s img {
    width: 100%;
    display: block;
    margin: 0 auto;
    height: auto;
}
.same-s.same-1 {
    width: 66.5%;
    overflow: scroll;
    position: absolute;
    margin-left: 174px;
    margin-top: 65px;
    height: 57.25%;
}
.demo-container {
    height: 56em;
}
button.btn.btn-primary.btn-lg {
    margin-left: 9.9em;
    margin-top: 26.5em;
    position: absolute;
}
img.site {
    border: 4px solid #ccc;
}

.demo-container {
    overflow: hidden; /* demo only--accounts for image whitespace */
}
.mac {
    position: relative;
    margin: -5.3% -20.5% 0 -18.5%; /* demo only--accounts for image whitespace */
}
.screen {
    position: absolute;
    top: 9%; /* demo only--accounts for image whitespace */
    right: 17%; /* demo only--accounts for image whitespace */
    left: 15.6%; /* demo only--accounts for image whitespace */
    height: 58%;
    overflow: auto;
}

<div class="row">
    <div class="col-xs-12">
        <div class="demo-container">
            <div class="mac">
                <img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/mac.png" alt="" />
                <div class="screen">
                    <img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/site1.jpg" alt="" />
                </div>
            </div>
        </div>
    </div>
</div>