堆棧內存溢出
  簡體   English   中英

當我調整網站大小時，網頁不適合

[英]When I resize my website the webpage doesn't fit in well

 原文  2021-03-31 15:17:20  7   4    html/ jquery/ css/ twitter-bootstrap/ sass

問題描述

我的網頁在 595px

我正在為網站使用 HTML、SASS 和 Bootstrap。 我已經包含了英雄部分的源代碼。 在我開始研究響應能力之前，它工作得非常好。 網頁似乎變得比實際屏幕尺寸小。 您可以查看屏幕截圖

我的 HTML：

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Restora</title>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Medula+One&family=Roboto:wght@300&family=Teko:wght@300&display=swap" rel="stylesheet">

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="test.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/0df7cc894a.js" crossorigin="anonymous"></script>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


</head>
<body>

    <div class="hero-section">

        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="#">Restora</a>
            <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="navbarSupportedContent">
              <ul class="navbar-nav mr-auto ml-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>

                <li class="nav-item">
                  <a class="nav-link" href="#">Menu</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                  </li>

                <li class="nav-item">
                  <a class="nav-link " href="#">Contact</a>
                </li>
              </ul>

              <ul class="icons">
                <i class="fa fa-search fa-2x"></i>
                <i class="fa fa-cart-plus fa-2x"></i>
              </ul>

            </div>
          </nav>


              <div class="container-fluid">
                  <div class="row">

                    <div class="col-lg-6 col-12 hero-img">
                      <img src="./restora-bg.png" alt="">
                    </div>

                    <div class="col-lg-6 col-12 hero-text">
                        <h1> <span>Experience</span> <br> The Real Taste</h1>
                        <div class="line"></div>
                        <p class="lead">Delicious Food For Every Mood</p>

                        <button>Order Now</button>
                    </div>

                  </div>
              </div>

    </div>

我的 CSS：

      body {
        font-family: 'Teko', sans-serif;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
    }
        // Navbar

    .hero-section {
        nav {
            padding: 0 50px;


            a {
                font-size: 24px;
                font-family: roboto, sans-serif;
                letter-spacing: 1px;
                font-weight: 500;
            }
        
            li {
                padding: 0 10px;
            }

            .navbar-brand {
                font-size: 48px;
                font-family: 'Medula One', cursive;
            }

            .icons {
                padding-top: 15px;
            }
        }
    }

    // Hero-Section

    .hero-section {
        letter-spacing: 8px;

        .hero-img {
            // background: url('restora-bg.png') no-repeat;
            // background-size: contain;

            width: 100%;
        }

        .hero-text {
            padding: 100px 80px;
            
            @media(max-width: 768px) {
                padding: 10px;
            }

            h1 {
                font-size: 6rem;
                @media(max-width: 768px) {
                    font-size: 4rem;
                }

            }

            span {
                font-size: 8rem;
                font-weight: bold;

                @media(max-width: 768px) {
                    font-size: 6rem;
                }
            }

            p {
                font-size: 2rem;
                padding-top: 30px;
                letter-spacing: 2px;
                font-family: roboto, sans-serif;
            }
            
            button {
                font-size: 1.3rem;
                font-weight: 600;
                padding: 8px 20px;
                letter-spacing: 2px;
                font-family: roboto, sans-serif;
                background-color: white;
                border: 3px solid;

                &:hover {
                    border: 2px solid black;
                    background-color: rgb(0, 0, 0);
                    color: white;
                }
            }

            .line {
                background-color: rgb(146, 1, 1);
                width: 100px;
                height: 5px

            }
        }
    }

該網站非常適合屏幕寬度達到 600 像素。 但是當我進一步降低屏幕尺寸時，網頁似乎比實際屏幕尺寸越來越小。

我使用了幾種方法，例如在圖像上使用最大寬度、檢查視口、使用 html 和正文標簽的不同屬性來填充屏幕尺寸等。

請花點時間幫我修復它。

我的網頁在 496px

4 個解決方案

解決方案1
 0  2021-03-31 15:20:07

我認為這是導致問題的圖像。 默認情況下，圖像能夠跨越比頁面更寬的寬度。

如果添加：

img {
  max-width: 100%;
}

對於 css，它應該解決這個問題。

解決方案2
 0  2021-04-01 06:14:29

我認為圖像的問題，嘗試給它w-100 class 或嘗試通過檢查器將其刪除，看看它是否導致問題

解決方案3
 0 已采納  2021-04-03 08:14:57

在此處輸入圖像描述

嘿 Akib，如果我沒記錯的話，這個解決方案看起來很簡單，因為你已經在你的項目中包含了引導程序，所以只需在你的 img 標簽中添加“img-fluid”或“w-100”class。

<img src="./restora-bg.png" class="img-fluid" alt="">

解決方案4
 0  2021-04-03 08:33:10

可能是正在調整大小的導航？

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 在我調整網頁大小之前，谷歌地圖顯示不佳 網頁未正確調整大小 我的html網頁在調整大小時弄亂了 調整窗口大小時，網頁上的項目會不斷變化 調整瀏覽器大小時，bxslider滑塊圖像不會調整大小 我無法在不破壞我的網站的情況下調整圖像大小 當我頁面上的內容不適合屏幕時，它會移動頁面的 rest。 我怎樣才能解決這個問題？ 當我在桌面上調整瀏覽器大小時，我的網站是響應式的，但是當我在實際的移動設備上瀏覽時，它沒有響應 當我使用 flexbox 時，為什么我的 Chart.js Canvas 不調整大小？ 調整網站大小時，圖像不會在一起
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM