如何使该网站适合所有屏幕尺寸？

Question

我在屏幕尺寸方面遇到麻烦。我经常使用Bootstrap。

以下是图片：

无礼的来源：

body
  background: $main-background
  margin: 0
  width: 100%
  height: 100%
  
 .footer
  position: absolute
  color: white
  font-family: Arial
  width: 100%
  height: 100%
  background-color: $plok-orange
  background-repeat: no-repeat
  background-size: 100%
  background-position: 50% 50%
  
  @media screen and (max-width: 1170px)
  min-width: 960px
  .footer
    width: 960px
    
.footer-left
  margin-top: $margin-top-footer
  float: left
  margin-left: 20px

.footer-left h1
  color: $plok-black
  font-size: 30px
  font-family: Helvetica
  font-weight: lighter

.footer-right
  margin-top: $margin-negative-footer
  float: right
  margin-left: 200px

.footer-right h1
  color: $plok-black
  font-size: 30px
  font-family: $font-stack
  font-weight: lighter   

html来源：

<div class="jumbotron">
        <h1 class="display-4">..........</h1>
        <p class="lead">........</p>
        <hr class="my-4">
        <p>..........</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </div>
    <div class="footer">
        <div class="footer-left">
            <h1>Preview</h1>
            <div class="row">
                <div class="col-md-2">
                    <img src="images/plokster-art-1.jpg" alt="..." class="img-thumbnail">
                </div>
                <div class="col-md-2">
                    <img src="images/plokster-art-2.jpg" alt="..." class="img-thumbnail">
                </div>
                <div class="col-md-2">
                    <img src="images/plokster-art-3.jpg" alt="..." class="img-thumbnail">
                </div>
                <div class="footer-right">
                    <h1>Contact</h1>
                </div>
                    </form>
                </div>
                </div>
            </div>

我知道我没有使用相同的最大宽度/最小宽度进行测试，但是在原始屏幕尺寸上的任何一种方式仍然不合适。我正在使用sass。 `

Answer 1

您需要在根元素jumbotron上设置样式

我不太确定您要达到的目标。但是，这是我的看法。

由于您的页脚为position: absolute，因此我将视为亲戚。 在您的根类上尝试

.jumbotron {
  position: relative;
  width: 100%;
}

也许可以考虑在页脚中使用绝对位置作为其位置

.footer {
  left: 0; bottom: 0; right: 0;
}

请记住，基于百分比的维度（例如width: 100%）是基于父元素的。 100％的父级等于父级的尺寸。似乎您尚未设置根元素的样式