Question

我正在为一个网站编写代码，但遇到一个问题，我需要了解用户屏幕宽度的相关背景，但无法弄清楚该怎么做。

我已经尝试使用相关单位和媒体查询，如下面的代码所示。我还尝试过使用经典容器，该容器确实可以扩展到一定程度，但是随着页面变小，最终会碰到浏览器窗口的边界。目的是在浏览器窗口的末端和“ background-dark-white”之间留一个小的空白，该空白与用户的页面宽度有关。

<section id="jobs">
    <div class="container-fluid background-dark-white pt-4 pb-3 shortest">
        <div class="container-fluid shorter-inner">
            <div class="row">
                <div class="col-md-6 col-lg-4 mt-3 mb-0 mx-auto">
                    <div class="card">
                        <img src="../images/painting.jpg" alt="painting-image" class="card-img-top">
                        <div class="card-body background-dark-white">
                            <h4 class="card-title text-capitalize">painting</h4>
                            <p class="card-text">
                            <h5 class="text-grey font-weight-light pb-3 pt-1">Draw an artwork.</h5>
                        </div>
                    </div>
                </div>
                <!--End of technology card-->
                <!--Marketing card-->
                <div class="col-md-6 col-lg-4 mt-3 mb-0 mx-auto card-width-longer">
                    <div class="card">
                        <img src="../images/engineering.jpg" alt="engineering-image" class="card-img-top">
                        <div class="card-body background-dark-white">
                            <h4 class="card-title text-capitalize">engineering</h4>
                            <p class="card-text">
                            <h5 class="text-grey font-weight-light pb-3 pt-1">Assemble the parts together.</h5>
                        </div>
                    </div>
                </div>
                <!--End of marketing card-->
                <!--Design card-->
                <div class="col-md-6 col-lg-4 mt-3 mb-0 mx-auto card-width-longer">
                    <div class="card">
                        <img src="../images/computing.jpg" alt="computing-image" class="card-img-top">
                        <div class="card-body background-dark-white">
                            <h4 class="card-title text-capitalize">computing</h4>
                            <p class="card-text">
                            <h5 class="text-grey font-weight-light pb-3 pt-1">Write an amazing computer program.</h5>
                        </div>
                    </div>
                </div>
                <!--End of design card-->
                <!--Product card-->
                <div class="col-md-6 col-lg-4 mt-3 mb-0 mx-auto card-width-longer">
                    <div class="card">
                        <img src="../images/advertising.jpg" alt="advertising-image" class="card-img-top">
                        <div class="card-body background-dark-white">
                            <h4 class="card-title text-capitalize">advertising</h4>
                            <p class="card-text">
                            <h5 class="text-grey font-weight-light pt-1">Know advanced advertising tactics.</h5>
                        </div>
                    </div>
                </div>
                <!--End of product card-->
                <!--Service card-->
                <div class="col-md-6 col-lg-4 mt-3 mb-0 mx-auto card-width-longer">
                    <div class="card">
                        <img src="../images/servicing.jpg" alt="servicing-image" class="card-img-top">
                        <div class="card-body background-dark-white">
                            <h4 class="card-title text-capitalize">servicing</h4>
                            <p class="card-text">
                            <h5 class="text-grey font-weight-light pt-1">Provide quality services worldwide.</h5>
                        </div>
                    </div>
                </div>
                <!--End of service card-->
                <!--Selling card-->
                <div class="col-md-6 col-lg-4 mt-3 mb-0 mx-auto card-width-longer">
                    <div class="card">
                        <img src="../images/writing.jpg" alt="writing-image" class="card-img-top">
                        <div class="card-body background-dark-white">
                            <h4 class="card-title text-capitalize">writing</h4>
                            <p class="card-text">
                            <h5 class="text-grey font-weight-light pt-1">Write a book and express yourself.</h5>
                        </div>
                    </div>
                </div>
                <!--End of selling card-->
                <!--End of the benefits section-->
            </div>
        </div>
    </div>
</section>

这是我所做的所有CSS修改：

.shortest {
  max-width: 100rem;
  width: 100%;
  max-width: 90rem;
}
.shorter-inner {
  max-width: 100rem;
  width: 100%;
  max-width: 76rem;
}

@media only screen and (min-width: 1200px) {
  .shortest {
    max-width: 100rem;
  }
}
@media only screen and (min-width: 992px) {
  .shortest {
    max-width: 70rem;
  }
}
@media only screen and (min-width: 768px) {
  .shortest {
    max-width: 50rem;
  }
}
@media only screen and (min-width: 600px) {
  .shortest {
    max-width: 40rem;
  }
}

我在做什么错？它与错误的媒体查询有关吗？感谢任何人帮助我！

Answer 1

您正在使用rem，它与根元素的字体大小有关。
%是相对于父元素的，因此请记住这一点。

如果要获取“屏幕宽度尺寸”，则可以使用vw（= Vievport Width），即为上述vievport宽度的1％。

您可以在此处了解更多信息：link。

如何使间距相对于屏幕宽度？

1 个答案: