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

【问题标题】：How do I make this website fit all screen sizes?如何使该网站适合所有屏幕尺寸？
【发布时间】：2018-12-14 05:28:53
【问题描述】：

我在屏幕尺寸方面遇到了问题。我经常使用 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>

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

【问题讨论】：

请发布您的 html。
min-width: 960px 和 .footer { width: 960px} 对于任何低于 1170 像素的分辨率看起来都不正确，您不想用 @media screen and (min-width: 1170px) 代替吗？尝试一次识别一个元素并修复该元素，然后移至下一个。
当使用基于百分比的尺寸（例如宽度：100%）时，您正在做 100% 的父级。您应该在这里查看的是您的根类 (jumbotron)，它没有应用样式。
有一个</form> 没有开始标签

标签： html css sass

【解决方案1】：

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

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

由于您的页脚是 position: absolute 我会考虑一个相对的父母。在你的根类上试试这个

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

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

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

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

【讨论】：

造型 jumptron 位置：相关工作，谢谢。