HTML 元视口(viewport)正在削减我的布局。为什么会这样？-6ren

HTML 元视口(viewport)正在削减我的布局。为什么会这样？

转载作者：行者123 更新时间：2023-11-27 23:54:50

我正在构建响应式网页。现在我将开始使用媒体查询，但是当我插入 <meta name="viewport" content="width=device-width"> 时并使屏幕变小，我的页眉、第一部分和页脚的背景的一部分被剪切，只保留其中的一部分和带有文本的空白。您可以在代码段中看到它。为什么会发生这种情况，我该如何解决？

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
body{
    font-family: 'Open Sans', sans-serif;
    margin: 0;
}
a{
    text-decoration: none;
    transition: 0.2s linear;
}
header{
    background-color: rgb(93, 158, 76);
    display: flex;
    align-items: center;
    padding: 0px 30px;
}
header img{
    width: 45px;
}
header h1{
    font-family: 'Doppio One', cursive;
    margin-left: 10px;
    color: rgb(214, 245, 210);
}
nav ul{
    display: flex;
    list-style: none;
}
nav ul li a{
    margin-left: 55px;
}
nav a{
    color: rgb(230, 245, 229);
    font-size: 17px;
}
nav a:hover{
    background-color: rgb(143, 182, 135);
    padding: 10px 15px;
    margin: 0 -15px 0 40px;
}
#firstsection{
    background-image: url(Images/coffee-3289259_1280.jpg);
    background-size: cover;
    height: 900px;
    position: relative;
}
#firstsection div{
    margin-top: 0;
    position: absolute;
    left: 100px;
    top: 150px;
    color: rgb(47, 119, 27);
    text-align: center;
}
#firstsection h1{
    margin-bottom: 45px;
}
#firstsection div a{
    font-weight: bold;
    border: 2px solid rgb(47, 119, 27);
    padding: 13px 30px;
    font-size: 16.5px;
    color: rgb(47, 119, 27);
}
#firstsection div a:hover{
    color: rgb(133, 163, 131);
    border: 2px solid rgb(133, 163, 131);
}
#textboxes{
    display: flex;
    margin-top: 50px;
}
#middlesection div div{
    text-align: center;
    margin: 15px 60px;
    border: 2px solid rgb(93, 158, 76);
    padding: 30px 30px;
}
#middlesection img:first-of-type{
    width: 55px;
}
#middlesection h2{
    text-align: center;
    width: 100%;
}
#lastsection{
    text-align: center;
}
#lastsection img{
    width: 500px;
    margin: 100px auto 0px;
}
#lastsection div{
    position: relative;
    bottom: 450px;
}
#lastsection div a:visited{
    color: blue;
}
footer{
    background-color: rgb(93, 158, 76);
    padding: 15px;
    color: rgb(214, 245, 210);
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}
footer img{
    height: 35px;
    width: 35px;
    margin-right: 15px;
}
footer div{
    text-align: center;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Finances | Manage your money easily</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <meta name="description" content="Control you spending and manage your money easily. Your finances by the short hairs.">
        <meta name="author" content="Bruno M. B. Sdoukos">
        <meta name="keywords" content="finances, managing money, spending control">
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
    </head>
    <body>
        <header>
            <a href="index.html"><img src="Images/icons8-fund-accounting-80.png"></a>
            <a href="index.html"><h1>Finances</h1></a>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact us</a></li>
                    <li><a href="#">Register</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section id="firstsection">
                <div>
                    <h1>Manage your money easily, anywhere, anytime.</h1>
                    <a href="#">Get started</a>
                </div>
            </section>
            <section id="middlesection">
                <div id="textboxes">
                    <div>
                        <img src="Images/icons8-increase-64.png">
                        <h3>Concrete data</h3>
                        <p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
                    </div>
                    <div>
                        <img src="Images/icons8-navigation-toolbar-left-filled-50 (1).png">
                        <h3>Easy interface</h3>
                        <p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
                    </div>
                    <div>
                        <img src="Images/icons8-natural-user-interface-2-filled-50.png">
                        <h3>Fast access</h3>
                        <p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
                    </div>
                </div>
            </section>
            <section id="lastsection">
                <img src="Images/board-1362851_1280.png">
                <div>
                    <h2>Register now and enjoy<br>the best of Finances.</h2>
                    <a href="#">Create an account</a>
                </div>
            </section>
        </main>
        <footer>
            <img src="Images/icons8-fund-accounting-80.png">
            <div>
                <p>A work of Bruno Sdoukos.</p>
            </div>
        </footer>
    </body> 
</html>

最佳答案

对您的代码进行了一些更改。最初的问题是中段。当中间部分的宽度大于屏幕宽度时，会出现水平滚动条以允许用户查看其余内容。
要解决这个问题，您可以根据屏幕的宽度使对齐方式垂直而不是水平对齐。在下面的解决方案中，我包装了内容。

第二个问题是当标题中内容的宽度超过屏幕宽度时，即当容器的宽度试图与屏幕宽度相同时(记住 meta name="viewport ") 但内容溢出(因为它的宽度更大)。
要解决此问题，您可以在菜单中显示标题项。在我下面的解决方案中，我只是让它在标题中不占用空间(display: none)。例如解决方案可能像 this .

注意:下面的解决方案没有优雅的样式，也许您可以在这里和那里添加填充以使其看起来优雅

<!DOCTYPE html>
<html>
  <head>
    <title>Finances | Manage your money easily</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta
      name="description"
      content="Control you spending and manage your money easily. Your finances by the short hairs."
    />
    <meta name="author" content="Bruno M. B. Sdoukos" />
    <meta
      name="keywords"
      content="finances, managing money, spending control"
    />
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body>
    <script>
      function myFunction() {
        var x = document.getElementById("topulid");
        if (x.className === "topul") {
          x.className += " responsive";
        } else {
          x.className = "topul";
        }
      }
    </script>
    <header>
      <a href="index.html"><img src="Images/icons8-fund-accounting-80.png"/></a>
      <a href="index.html"><h1>Finances</h1></a>
      <div class="topnav" id="myTopnav">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>
      </div>
    </header>

    <main>
      <section id="firstsection">
        <div>
          <h1>Manage your money easily, anywhere, anytime.</h1>
          <a href="#">Get started</a>
        </div>
      </section>
      <section id="middlesection">
        <div id="textboxes">
          <div>
            <img src="Images/icons8-increase-64.png" />
            <h3>Concrete data</h3>
            <p>
              Simple but concrete data that are the answer to all the quesions
              about your current money, spending and.
            </p>
          </div>
          <div>
            <img
              src="Images/icons8-navigation-toolbar-left-filled-50 (1).png"
            />
            <h3>Easy interface</h3>
            <p>
              An interface easy to use, made to you who want to manage your
              money faster and with no problems.
            </p>
          </div>
          <div>
            <img src="Images/icons8-natural-user-interface-2-filled-50.png" />
            <h3>Fast access</h3>
            <p>
              No complications that make you lose time. Just some clicks and
              done, you are in Finances, with all you need.
            </p>
          </div>
        </div>
      </section>
      <section id="lastsection">
        <img src="Images/board-1362851_1280.png" />
        <div>
          <h2>Register now and enjoy<br />the best of Finances.</h2>
          <a href="#">Create an account</a>
        </div>
      </section>
    </main>
    <footer>
      <img src="Images/icons8-fund-accounting-80.png" />
      <div>
        <p>A work of Bruno Sdoukos.</p>
      </div>
    </footer>
  </body>
</html>

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap");
body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
}
a {
  text-decoration: none;
  transition: 0.2s linear;
}
header {
  background-color: rgb(93, 158, 76);
  display: flex;
  align-items: center;
}
header img {
  width: 45px;
}
header h1 {
  font-family: "Doppio One", cursive;
  margin-left: 10px;
  color: rgb(214, 245, 210);
}

.topnav {
  overflow: hidden;
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 500px;
  padding-left: 50px;
}

.topnav a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav .icon {
  display: none;
}

.icon {
  display: none;
}

#firstsection {
  background-image: url(Images/coffee-3289259_1280.jpg);
  background-size: cover;
  height: 900px;
  position: relative;
}
#firstsection div {
  margin-top: 0;
  position: absolute;
  left: 100px;
  top: 150px;
  color: rgb(47, 119, 27);
  text-align: center;
}
#firstsection h1 {
  margin-bottom: 45px;
}
#firstsection div a {
  font-weight: bold;
  border: 2px solid rgb(47, 119, 27);
  padding: 13px 30px;
  font-size: 16.5px;
  color: rgb(47, 119, 27);
}
#firstsection div a:hover {
  color: rgb(133, 163, 131);
  border: 2px solid rgb(133, 163, 131);
}
#textboxes {
  display: flex;
  /* flex-wrap: wrap; */
  margin-top: 50px;
  justify-content: space-around;
  flex-wrap: wrap;
}
#middlesection div div {
  text-align: center;
  /* margin: 15px 0px; */
  border: 2px solid rgb(93, 158, 76);
  padding: 30px 30px;
  max-width: 300px;
}
#middlesection img:first-of-type {
  width: 55px;
}
#middlesection h2 {
  text-align: center;
  width: 100%;
}
#lastsection {
  text-align: center;
}
#lastsection img {
  width: 500px;
  margin: 100px auto 0px;
}
#lastsection div {
  position: relative;
  bottom: 450px;
}
#lastsection div a:visited {
  color: blue;
}
footer {
  background-color: rgb(93, 158, 76);
  padding: 15px;
  color: rgb(214, 245, 210);
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}
footer img {
  height: 35px;
  width: 35px;
  margin-right: 15px;
}
footer div {
  text-align: center;
}

@media screen and (max-width: 830px) {
  .topnav a {
    display: none;
  }
  .icon {
    float: right;
    display: block;
  }
}

关于HTML 元视口(viewport)正在削减我的布局。为什么会这样？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56314672/

文章推荐： html - 具有高性能的响应图像

文章推荐： c++ - 模板不够灵活，重载导致代码重复怎么办

jquery - 正/负最大值输入
我有一个加号/减号按钮，希望用户不能选择超过 20 个但不知道如何让它工作。我尝试使用 min="1"max="5 属性，但它们不起作用。这是我的代码和一个 fiddle 链接。https://jsf
r - ggplot2 正/负图无法清晰呈现
我正在尝试复制顶部底部图，如示例 here但它没有正确渲染(紫色系列有 +ve 和 -ve 值，绿色为负值)留下杂乱的人工制品。我也在努力创建一个玩具示例来复制这个问题，所以我希望尽管我缺乏数据，但有
google-maps - 正/负纬度和经度值与基本方向
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 6 年前。社区去年审查了是
c++在添加两个绝对(正)值时得到负值
这个问题在这里已经有了答案: Adding two positive integers gives negative answer.Why? (4 个答案) 关闭 5 年前。我遇到了一个奇怪的问题
Java将负/正字符串数字转换为负/正 double
有谁知道如何将字符串值类型 -4,5 或 5,4 转换为 double -4.5 或 5.4? 最佳答案只需使用 Double.parseDouble(Locale, String); 糟糕，我很困
python - 在数据框中的新列中返回 TextBlob 正、负或中性分类
我正在尝试根据 TextBlob 分类插入一个仅包含“正”或“负”字符串的新数据框列:对于我的 df 的第一行，结果是 ( pos , 0.75, 0.2499999999999997)我想要' 正
VBA 循环根据相邻单元格更改单元格值(正/负)和字体颜色
我对 VBA 非常陌生，无法理解如何在一个循环中完成 2 个任务。我非常感谢您的帮助。我已经能够根据第 3 列中的数据更改第 2 列中的数值，但我不明白如何将负值的字体更改为红色。表格的大小每月都
jquery - 如何发送 "+"符号(加，正)
欢迎，我正在使用 jquery 通过 POST 发送表单。这就是我获得值(value)的方式。 var mytext = $("#textareaid").val(); var dataStrin
c# - 正 System.Double 值的快速下限和上限替代方案
double d = 0; // random decimal value with it's integral part within the range of Int32 and always p
javascript - 使用 Regex 正/负前瞻替换字符？
我有这个字符串: var a='abc123#xyz123'; 我想构建 2 个正则表达式替换函数: 1) 用 '*' 替换所有确实有 future '#'的字符(不包括'#') 所以结果应该是这样的
android - 如何将 DialogFragment 正/负按钮保留在软键盘上方
我正在使用 DialogFragment。当用户从 Gmail 平板电脑应用程序的屏幕与下面示例图片中的编辑文本进行交互时，我希望正面和负面按钮保持在键盘上方。在我的尝试中不起作用，这是我的 Dia
binary - 二进制补码； 0FFFFh 正，0FFFFh 负？
从组装艺术一书中，我复制了这句话: In the two’s complement system, the H.O. bit of a number is a sign bit. If the H.O
c++ - 基于数值(正、负、零)实现条件表达式的最佳方式
是否有更好更优雅的方法来实现下面的简单代码(diffYear、A 和 B 是数字): diffYear = yearA - yearB; if (diffYear == 0) { A = B
boolean true - 正 1 还是负 1？
我正在设计一种语言，并尝试确定 true 应该是 0x01 还是 0xFF。显然，所有非零值都将转换为 true，但我正在尝试确定确切的内部表示。每种选择的优点和缺点是什么？最佳答案没关系，只要
android - alertdialog 正/负按钮与全屏对话框 fragment 中的父级不匹配
在我的 dialogfragment 类的 OnCreateDialog 中，我正在这样做: AlertDialog.Builder builder = new AlertDialog.Builder
c++ - 正 lambda : '+[]{}' - What sorcery is this?
这个问题在这里已经有了答案: Resolving ambiguous overload on function pointer and std::function for a lambda usin
ios - 正 NSDecimalNumber 返回意外的 64 位整数值
我偶然发现了一个奇怪的 NSDecimalNumber 行为:对于某些值，调用 integerValue、longValue、longLongValue 等，返回意想不到的值(value)。示例: l
c++ - 正 lambda : '+[]{}' - What sorcery is this?
这个问题在这里已经有了答案: Resolving ambiguous overload on function pointer and std::function for a lambda using
regex - 匹配负/正 float/int 正则表达式 - 这是邪恶的吗？
我有这个正则表达式来测试用户输入是否有效: value.length === 0 || value === '-' || (!isNaN(parseFloat(value)) && /^-?\d+\.
matlab - 来自 matlab "fitgmdist"函数的不合理 [正] 对数似然值
我想用高斯混合模型拟合数据集，数据集包含大约 120k 个样本，每个样本有大约 130 个维度。当我使用 matlab 执行此操作时，我运行脚本(簇号为 1000): gm = fitgmdist(d

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

HTML 元视口(viewport)正在削减我的布局。为什么会这样？