堆栈内存溢出
  繁体   English   中英

当我调整网站大小时，网页不适合

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

 原文  2021-03-31 15:17:20  5   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