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

Question

我在屏幕尺寸方面遇到了问题。我在很多方面都使用 Bootstrap。

图片如下:

Sass 源代码:`

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>

我意识到我没有使用相同的最大宽度/最小宽度进行测试，但无论哪种方式在我的原始屏幕尺寸上仍然不适合。我正在使用萨斯。 `

Answer 1

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

我不太确定你想要达到什么目的。但这是我的看法。

因为你的页脚是 position: absolute 我会考虑一个相对父级。 在你的根类上试试这个

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

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

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

请记住，基于百分比的尺寸，例如 width: 100% 是基于父元素的。父级的 100% 等于父级的维度。好像您还没有设置根元素的样式