在较小的屏幕上，为什么整个页面都无法响应显示？

时间：2020-04-26 14:05:05

标签： html css sass

使用引导网格进行响应式设计，但是当屏幕尺寸减小时，页脚就会丢失，并且无法向下移动页面。下面显示的是why.html页面以及css文件和scss文件的样式。 我试图解决此问题的方法是： 在css文件中查找某些语法问题，我将背景图像从正文更改为html，但无济于事。任何帮助表示赞赏。 https://jsfiddle.net/eojcam/htkxnywL/7/ 

<!DOCTYPE html>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="images/favicon_nylon.ico" type="image/x-icon" />
    <title>why</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!-- My styles for project0 -->
    <link rel="stylesheet" href="css/styles_p0.css">
    <!-- My sass styles for project0 -->
    <link rel="stylesheet" href="css/variable_p0.css">
</head>
    <body>

        <header>
            <nav class="navbar navbar-expand-lg fixed-top navbar-dark">
                <a class="navbar-brand" href="index.html">Home</a>
                <div class="container">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                <div class="collapse navbar-collapse" id="navbar1">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                        <a class="nav-link" href="why.html">Why</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="examples.html">Examples</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="contact.html">Contact</a>
                        </li>
                    </ul>
                </div>
                </div>
            </nav>
            <h1></h1>
                    <h2>Drop That Pick!</h2> <!-- use of unicode for emoji -->
                    <p class="header_p">It's gonna happen anyway...&#128526;</p>
        </header>
        <section class="join">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <p>Several years ago, after returning from a position as Orchestral Guitarist on Royal Caribbean Cruise
                            Lines ship the "Monarch of the Seas,"</p>
                        <p>I decided to take some Classical Guitar lessons with a private
                            teacher. I learned how to play the guitar without a pick...</p>
                            ...revealing some new possibilities.
                            Like playing Walking Bass Lines,
                            Chords, and Melody all at once!
                    </div>
                </div>
            </div>
        </section>
        <section class="join">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <table>
                            <tr>
                                <th>Finger Style</th>
                                <th>Pick</th>
                            </tr>
                            <tr>
                                <td>Thumb and Fingers work independently.</td>
                                <td>Only one attack possible.</td>
                            </tr>
                            <tr>
                                <td>Invented first &#128526; (technique has been developed for longer time.)</td>
                                <td>Reliance, such that if you drop it, (or don't have one),
                                    means you are "out of business!"</td>  <!--use of table -->
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </section>
        <footer>
          <div class="container">
            <p id="footer_p">Copyright &copy; 2020 Joe Austin Mcintosh. All rights reserved.</p> <!-- id used -->
          </div>
        </footer>
    </body>
</html>

css：

body{
    padding-top:5rem;
    background:url(/Users/king/proj_0/images/nylon_string_original.JPG) no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
    color: #ffffff;
    {box-sizing: border-box;}
}

div {
    padding: 2px;
    text-align: center;
}

h1, h2, h3, h4  {
    color: #FFFF00;
}

h3 {
    margin-top: 0;
    margin-bottom: 0;
}

header {
    margin-left: 1%;
    margin-bottom: 1%;
}

p {
    margin-bottom: 0;
}

table {
    margin: 0 auto 0 auto;
    border: 2px solid #ffffff;
    border-collapse: collapse;
    width: 80%;
}

th, td {
    border: 1px solid #ffffff;
    padding: 5px;
    text-align: center;
}

th {
    background-color: lightgray;
    color: #6D2E0D;
}

ul  {
    list-style: none;
}

.header_p { /* use of class*/
    text-align:center;
    text-shadow:5px 5px 10px #ffffff;
    color: #FFFF00;
}

.join {
    padding:2px;
    margin-top: -20px;
    text-align: center;
}

.row > div {
    padding-top:5rem;
    color: #ffffff;
}

@media print {
    .screen_only {
        display: none;
    }
}

.section_d {
    padding: 2px;
    margin-bottom: 0px;
    font-family: Palatino, serif;
    text-align:center;
}

#a_examples {
    color: #ffffff;
}

#footer_p { /* use of id  */
    font-family: cursive;
    padding-top:2px;
    padding-left:4px;
    padding-right: 2px;
    margin-top: 0;
    text-align:center;
    text-shadow:5px 5px 10px #ffffff;
    color: #FFFF00;
}

#p_examples {
    text-align: center;
}

@media (min-width: 500px) {     /* media query use */
    h1::before {
        content: "Finger Style Guitar Club";
    }
}

@media (max-width: 499px) {
    h1::before {
        content: "Finger Style!";
    }
}

scss：

$cap: small-caps; /* variable use*/
    ul {
    font-variant: $cap;
    }

div {

    ul {  /* use of nesting*/

    li a {
            color: #ffffff;
        }
    }
}

%style { /* inheritance use */
    border: 1px solid black;
    padding: 1px;
    margin: 0px;
}

.full_name {
    @extend %style;
    color: blue;
}

.age {
    @extend %style;
    color: blue;
}

.playing_style {
    @extend %style;
    color: blue;
}

.where {
    @extend %style;
    color: blue;
}

1 个答案:

答案 0 :(得分：0)

页脚迷失了，因为您未在页脚元素中使用响应式Bootstraps设计。同样，为了利用响应元素和网格组件，最好为每个使用的设备定义元素 col 。例如：

Flux.from(testCondition.find())
.publishOn(Schedulers.boundedElastic())
.collectList()
.block()

lg大型设备，md中型设备和sm小型设备。这将使您的所有元素都能适应设备。 https://getbootstrap.com/docs/4.5/layout/grid/ 这是有关网格系统引导程序使用以及如何编写响应代码的更多信息。

此外，为了使自定义样式的网站更加容易，您可以只使用一个样式表，而仅链接一个样式表。您的SASS样式表将更改为.css文件，您可以在SASS文件中写入普通CSS，而该CSS仍将保留为CSS。

相关问题
最新问题