时间戳

首页 > 解决方案 > 为什么在较小的屏幕上不会响应显示整个页面？

html - 为什么在较小的屏幕上不会响应显示整个页面？

问题描述

使用引导网格进行响应式设计，但是当屏幕尺寸减小时，页脚丢失，并且无法向下移动页面。下面显示的是why.html页面加上css文件和scss文件的样式。我解决这个问题的尝试是：在 css 文件中查找一些语法问题，我将背景图像从 body 更改为 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;
}

标签： htmlcsssass

解决方案

the footer gets lost as you are not using the repsonsive Bootstraps design in your footer element. Also to utilise the responsive element, and grid component it is best to define an elements col per the device being used. For example:

    <div class="row">
        <div class="col-lg-3 col-md-6 col-sm-9">
            <!-- code in here -->
        </div>
    </div>

The lg large devices, md medium devices and sm small devices. This is will allow all of your elements to adapt to a device. https://getbootstrap.com/docs/4.5/layout/grid/ Here is more information on the grid system bootstrap uses and how to write responsive code.

Also, to make it easier for custom styling your website you can just use one stylesheet and only link one stylesheet. Your SASS stylesheet will get changed into a .css file, you can write vanilla css in your SASS file and it will remain css.

推荐阅读