Github Pages 显示与 VS Code 实时服务器不同答案

【问题标题】：Github Pages displays different then VS Code live serverGithub Pages 显示与 VS Code 实时服务器不同
【发布时间】：2019-12-05 09:54:21
【问题描述】：

当我在我的 VS Code 实时服务器上打开我的网站时，一切都按照我想要的方式进行了格式化。媒体查询缩小导航栏，并且 Jumbotron 图像正确显示。然而，在我的 Github Pages 中，一切都……更小了。导航栏、文本、jumbotron 图像。此外，即使屏幕最小，它也不会触发我最小的媒体查询。

我正在使用 SASS 和 Bootstrap。我正在使用 CDN，它是正确的 https 链接。我没有收到控制台或网络错误。

这是我的索引页的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">
</head>
<body class="home">
    <nav class="navbar navbar-expand-sm navbar-dark fixed-top">
        <a class="navbar-brand" href="index.html">BC</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="myNav">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item home">
                    <a class="nav-link" href="index.html">Home</a>
                </li>
                <li class="nav-item portfolio">
                    <a class="nav-link" href="portfolio.html">Portfolio</a>
                </li>
                <li class="nav-item contact">
                    <a class="nav-link" href="contact.html">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="jumbotron">
        <img class="myLogo d-none d-sm-block" src="pics/logo.jpg" alt="Billy Cook logo">
        <h1 class="display-1 jumbotext">Billy Cook</h1>
        <p class="display-4 jumbotext fadein">Welcome to my site.</p>
        <p class="jumbotext desc fadein">Below you'll find a list of languages and technologies I have learned while studying at Algonquin College.</p>

    </div>
    <div class="container fadein">

        <div class="techgroup">
            <div class="row mainrow">
                <div class="col">
                    <!-- source: https://en.wikipedia.org/wiki/HTML5#/media/File:HTML5_logo_and_wordmark.svg -->
                    <img class="techlogo" src="pics/html.svg" alt="HTML5 logo">
                    <h1>HTML</h1>
                    <p class="lead">As the building block for all websites, profficiency in HTML is important. Without the proper foundation, you are extremely limited with what you can do with a website. From &lt;a&gt; to...</p>
                </div>
            </div>
        </div>

        <div class="techgroup">
            <div class="row mainrow">
                <div class="col">
                    <!-- source: https://en.wikipedia.org/wiki/Cascading_Style_Sheets#/media/File:CSS3_logo_and_wordmark.svg -->
                    <img class="techlogo" src="pics/css.svg" alt="CSS logo">
                    <h1>CSS</h1>
                    <p class="lead">...z index, HTML and CSS go together like two peas in a pod. CSS can be a gamechanger between your website being from 1999 to looking brand new. Let me help you do that.</p>
                </div>
            </div>

            <div class="row">
                <div class="col-2">
                </div>
                <div class="col-10 subrow">
                    <!-- source: https://en.wikipedia.org/wiki/Sass_(stylesheet_language)#/media/File:Sass_Logo_Color.svg -->
                    <img class="techlogo" src="pics/sass.svg" alt="SASS logo">
                    <h1>SASS</h1>
                    <p>SASS is a great way to write meaningful CSS quickly. It incorporates variables and functions to beautify HTML faster and more easily than plain CSS. Who doesn't love efficiency?</p>
                </div>
            </div>

            <div class="row">
                <div class="col-2">

                </div>
                <div class="col-10 subrow">
                    <!-- source: https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)#/media/File:Bootstrap_logo.svg -->
                    <img class="techlogo" src="pics/boot.png" alt="Bootstrap logo">
                    <h1>Bootstrap</h1>
                    <p>Bootstrap is a CSS framework that provides a responsive and mobile-first design for modern websites. From FIFA to NASA, countless international companies use Bootstrap. So does this one.</p>
                </div>
            </div>
        </div>
        <div class="techgroup">
            <div class="row mainrow">
                <div class="col">
                    <!-- Javascript logo: https://commons.wikimedia.org/wiki/File:Badge_js-strict.svg -->
                    <img class="techlogo" src="pics/js.svg" alt="Javascript logo">
                    <h1>Javascript</h1>
                    <p class="lead">Javascript is the master behind the interactive-ness behind modern websites. From validation of forms, to dropdown menus, to pop-up alerts. You can thank Javascript.</p>
                </div>
            </div>

            <div class="row">
                <div class="col-2">
                </div>
                <div class="col-10 subrow">
                    <!-- source: https://en.wikipedia.org/wiki/JQuery#/media/File:JQuery_logo.svg -->
                    <img class="techlogo" src="pics/jq.png" alt="J Query logo">
                    <h1>jQuery</h1>
                    <p>jQuery is a Javascript framework that simplifies object selection and document manuipulation. <a href="https://blog.logrocket.com/using-jquery-in-2019/"  target="_blank">While potentially outdated,</a> jQuery is still used by millions of websites.</p>
                </div>
            </div>
        </div>

        <div class="techgroup">
            <div class="row mainrow">
                <div class="col">
                    <!-- source: https://en.wikipedia.org/wiki/Python_(programming_language)#/media/File:Python_logo_and_wordmark.svg -->
                    <img class="techlogo" src="pics/py.png " alt="Python logo">
                    <h1>Python</h1>
                    <p class="lead">Python is a high-level programming language with endless usability. With variables, functions, objects, classes, and more, plenty of back-end applications are possible. It's also extremely readable and simple. Read <a href="https://en.wikipedia.org/wiki/Zen_of_Python" target="_blank">the Zen of Python here.</a></p>
                </div>
            </div>

            <div class="row">
                <div class="col-2">
                </div>
                <div class="col-10 subrow">
                    <!-- source: https://en.wikipedia.org/wiki/Flask_(web_framework)#/media/File:Flask_logo.svg -->
                    <img class="techlogo" src="pics/flask.svg" alt="Flask logo">
                    <h1>Flask</h1>
                    <p>Flask is a Python web framework. It allows us to connect HTML, CSS, Javascript, Python and more to make a completely functional website, backend included.</p>
                </div>
            </div>
        </div>

        <div class="techgroup">
            <div class="row mainrow">
                <div class="col">
                    <!-- source: https://en.wikipedia.org/wiki/MySQL#/media/File:MySQL.svg -->
                    <img class="techlogo" src="pics/sql.png" alt="SQL logo">
                    <h1>SQL</h1>
                    <p class="lead">SELECT * FROM SQLFEATURES; <br> SQL allows us to find key relationships from massive databases. It helps us work with large datasets and find exact values we need.</p>
                </div>
            </div>
        </div>

        <div class="techgroup">
            <div class="row mainrow">
                <div class="col">
                    <h1>Other technologies</h1>
                    <p class="lead">Languages aren't the only thing. I have plenty of soft skills as well, from my extensive experience in the Service Industry, including teamwork, initiative, dependability, and responsibility. However, a few more technologies I've worked with are listed as well.</p>
                </div>
            </div>

            <div class="row">
                <div class="col-2">
                </div>
                <div class="col-10 subrow">
                    <!-- source: https://en.wikipedia.org/wiki/GitHub#/media/File:Font_Awesome_5_brands_github.svg -->
                    <img class="techlogo github" src="pics/git.svg" alt="Github logo">
                    <h1>Github</h1>
                    <p><em>git init <br>
                    git add -A<br>
                    git commit -m "added everything all at once"<br>
                    git push -u origin master</em><br>
                    That's it, right?</p>
                </div>
            </div>

            <div class="row">
                <div class="col-2">

                </div>
                <div class="col-10 subrow">
                    <!-- source: https://en.wikipedia.org/wiki/Raspberry_Pi#/media/File:Raspberry_Pi_Logo.svg -->
                    <img class="techlogo" src="pics/raspi.png" alt="Rasperry Pi logo">
                    <h1>Rasperri Pi</h1>
                    <p>Working with a Rasperry Pi has taught me about remote hosting, file transfer, IP address tracking, and much more. It's also given me experience with Command Line Interface commands</p>
                </div>
            </div>
        </div>

        <div class="techgroup">
            <div class="row mainrow">
                <div class="col">
                    <h1>Coming Soon</h1>
                    <p class="lead">During the next few semesters, I will also be studying Network Operating Systems, C#, ASP.net, PHP, XML and much much more.</p>
                </div>
            </div>
        </div>


    </div>

    <div class="footer">
        <p>&copy;Billy Cook, 2019</p>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous" type="text/Javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous" type="text/Javascript"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous" type="text/Javascript"></script>
</body>
</html>

还有我的 SASS 文件：

// color variables

$grey: hsl(0, 0%, 66%);
$lightgreen: hsl(80, 17%, 58%);
$black: hsl(203, 24%, 7%);
$green: hsl(120, 100%, 25%);
$white: hsl(0, 0%, 100%);

// Styles common to all pages
.myLogo{
    border-radius: 50%;
    height: 20vh;

}
.jumbotron{
    min-height: 40vh;
    max-height: 76vh;
    text-align: center;
    background-image: url(https://picsum.photos/id/434/1600/550);
    img{
        display:block;
        margin-left:auto;
        margin-right:auto;
    }
}
.jumbotext{
    color: $white;
    font-weight: 400;
    text-shadow: 2px 3px 2px darken($grey, 30%);
    padding-top: 1rem;
}
.fadein{
    animation: fadein .8s;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.desc{
    font-size:1.25rem;
}
.footer{
    background-color: $green;
    p{
        padding:1rem;
        margin: 0rem;
        text-align: right;
    }
}
//Styles for Nav Bar
.navbar{
    background-color: $green;
    opacity: 95%;
}
.navbar-brand{
    border-left: 2px solid $black;
    border-bottom: 2px solid $black;
    padding-right: 1rem;
    padding-left: 1rem;
}
.navbar-expand-sm .navbar-nav .nav-link{
    padding-right: 3rem;
    margin-left: 0rem;
    margin-right:1rem;
    padding-left: 1rem;
    border-left: 2px solid $black;
    border-bottom: 2px solid $black;
}
.nav-link:hover, .navbar-brand:hover{
    background-color: lighten($green, 5%);
}

$pages: home, portfolio, contact;

@each $pg in $pages{
    body.#{$pg} li.#{$pg}.nav-item a{
        color: hsla(0, 0%, 100%,1.0);
    }
}

// Styles for main page
.mainrow{
    background-color: lighten($green, 62%);
    border: 2px solid $green;
    padding: 1rem;
    margin-bottom: 0.5rem;
    height: auto;
}
.subrow{
    background-color: lighten($green, 70%);
    border: 2px solid $green;
    margin-bottom: 0.5rem;
    padding: 1rem;
}
.techlogo{
    height: 8rem;
    width: auto;
    float: left;
    padding: 1rem 1rem 1rem;
}
.techgroup{
    margin-bottom: 2rem;
}


// Styles for portfolio page
.card{
    margin-bottom: 1rem;
}
.card-img-bottom{
    width: 100%;
}
.javapic{
    height: 15rem;
}
.github{
    height: 10rem;
}
.card:hover{
    box-shadow: 2px 2px 20px $black;
}

//Style for contact page
.contactform{
    margin:2rem;
}
.form-group{
    padding:0.5rem;
}
.radio-container{
    margin: 2rem 0rem;
}
.label{
    font-weight:700;
}
.contact-container{
    width: 60%;
    min-width: 500px;
}
.btn{
    background-color: lighten($green, 10%);
}

最后，我的输出 CSS 文件：

.myLogo {
  border-radius: 50%;
  height: 20vh;
}

.jumbotron {
  min-height: 40vh;
  max-height: 76vh;
  text-align: center;
  background-image: url(https://picsum.photos/id/434/1600/550);
}
.jumbotron img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.jumbotext {
  color: white;
  font-weight: 400;
  text-shadow: 2px 3px 2px #5c5c5c;
  padding-top: 1rem;
}

.fadein {
  animation: fadein 0.8s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.desc {
  font-size: 1.25rem;
}

.footer {
  background-color: green;
}
.footer p {
  padding: 1rem;
  margin: 0rem;
  text-align: right;
}

.navbar {
  background-color: green;
  opacity: 95%;
}

.navbar-brand {
  border-left: 2px solid #0e1316;
  border-bottom: 2px solid #0e1316;
  padding-right: 1rem;
  padding-left: 1rem;
}

.navbar-expand-sm .navbar-nav .nav-link {
  padding-right: 3rem;
  margin-left: 0rem;
  margin-right: 1rem;
  padding-left: 1rem;
  border-left: 2px solid #0e1316;
  border-bottom: 2px solid #0e1316;
}

.nav-link:hover, .navbar-brand:hover {
  background-color: #009900;
}

body.home li.home.nav-item a {
  color: white;
}

body.portfolio li.portfolio.nav-item a {
  color: white;
}

body.contact li.contact.nav-item a {
  color: white;
}

.mainrow {
  background-color: #bdffbd;
  border: 2px solid green;
  padding: 1rem;
  margin-bottom: 0.5rem;
  height: auto;
}

.subrow {
  background-color: #e6ffe6;
  border: 2px solid green;
  margin-bottom: 0.5rem;
  padding: 1rem;
}

.techlogo {
  height: 8rem;
  width: auto;
  float: left;
  padding: 1rem 1rem 1rem;
}

.techgroup {
  margin-bottom: 2rem;
}

.card {
  margin-bottom: 1rem;
}

.card-img-bottom {
  width: 100%;
}

.javapic {
  height: 15rem;
}

.github {
  height: 10rem;
}

.card:hover {
  box-shadow: 2px 2px 20px #0e1316;
}

.contactform {
  margin: 2rem;
}

.form-group {
  padding: 0.5rem;
}

.radio-container {
  margin: 2rem 0rem;
}

.label {
  font-weight: 700;
}

.contact-container {
  width: 60%;
  min-width: 500px;
}

.btn {
  background-color: #00b300;
}

/*# sourceMappingURL=main.css.map */

还有一个指向我的 Github 页面的链接：https://cook0318.github.io/MySite/

Here is what my site looks like from Github pages.

Here is a photo of what my site looks like when running on my Live Server.

提前感谢您的帮助。

【问题讨论】：

关于 Stack Overflow（所有 Stack Exchange 网络）的问题必须是独立的。 Stack Overflow 的主要目的是让问题对未来的访问者有用。基本上是：“去看看我的网站并修复它”的问题对未来的访问者没有用处。这个问题可能很好/有用，但是您需要将足够的代码移入问题中，以便我们知道您在问什么。请看：Something in my web site or project doesn't work. Can I just paste a link to it?

标签： html css sass bootstrap-4 github-pages

【解决方案1】：

尝试重新编译您的 sass 文件，并检查您的检查器是否在控制台部分有问题。

【讨论】：

对不起，我不确定你说的重新编译我的 sass 文件是什么意思，我还在学习。你的意思是重新下载sass？我的大部分 Sass 样式都可以正常工作，只是某些事情搞砸了。另外，我没有控制台错误

【解决方案2】：

好吧，我是个白痴。由于某种原因，我的 Github Pages 链接被缩小了。每当我关闭并重新打开它时，它都会保持缩小状态。

【讨论】：

【解决方案3】：

这可能是您的图片尺寸问题。 jQuery 标志看起来很大。蟒蛇也慢慢变大了

【讨论】：

我会尝试给它们更多的相对尺寸，看看是否有帮助