当我调整网站大小时，网页不适合
Posted
技术标签:
【中文标题】当我调整网站大小时，网页不适合【英文标题】：When I resize my website the webpage doesn't fit in well 【发布时间】：2021-06-27 15:07:12 【问题描述】：my webpage at 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" >
</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 像素。但是当我进一步降低屏幕尺寸时，网页似乎变得比实际屏幕尺寸越来越小。
我使用了几种方法，例如在图像上使用 max-width、检查视口、使用 html 和 body 标签的不同属性来填充屏幕大小等。
请花点时间帮我修复它。
my webpage at 496px
【问题讨论】：
有没有视口小于 366px 的设备？ 请上传整个代码，以便我们扫描它以找出问题的根源。 好的，我已经添加了源代码并更新了截图。非常感谢您帮助解决此问题。 Lelio Faieta，其实摩托罗拉 Moto G4 和 Galaxy Fold 都不到 366px，所以我猜应该会更多 【参考方案1】：嘿阿基布， 如果我没记错的话，这个解决方案看起来很简单，因为你已经在你的项目中包含了引导程序，所以只需在你的 img 标签中添加“img-fluid”或“w-100”类。
<img src="./restora-bg.png" class="img-fluid" >
【讨论】：
【参考方案2】：我认为是图像导致了问题。默认情况下，图片可以跨越比页面更宽的宽度。
如果你添加：
img
max-width: 100%;
对于 css，它应该解决这个问题。
【讨论】：
是的，我已经尝试过了，实际上我已经添加了完整的源代码。你能帮帮我吗，也许是什么东西不见了，或者我做错了【参考方案3】：我认为是图像的问题，尝试给它w-100 class
或者尝试通过检查器删除它，看看它是否导致问题
【讨论】：
【参考方案4】：可能是正在调整大小的导航？
【讨论】：
以上是关于当我调整网站大小时，网页不适合的主要内容，如果未能解决你的问题，请参考以下文章