Html 调整屏幕尺寸时使用@media保持导航元素在适当位置_Html_Css

Html 调整屏幕尺寸时使用@media保持导航元素在适当位置

html css

Html 调整屏幕尺寸时使用@media保持导航元素在适当位置,html,css,Html,Css,我正在努力使我的导航元素“家”、“学习”、“爱好”不会离开它们的位置。我目前正在使用@media，只是调整了字体大小，但最终它变得太小和/或向下移动，而我不想让它移动。我相信更聪明的人能帮上忙，或者知道最好的方法是什么谢谢！（我对css和html也很陌生）非常感谢为我指明正确方向的任何帮助 <html> <head> <link rel="stylesheet" href="main.css">

我正在努力使我的导航元素“家”、“学习”、“爱好”不会离开它们的位置。我目前正在使用@media，只是调整了字体大小，但最终它变得太小和/或向下移动，而我不想让它移动。我相信更聪明的人能帮上忙，或者知道最好的方法是什么

谢谢！（我对css和html也很陌生）非常感谢为我指明正确方向的任何帮助

<html>

  <head>
    <link rel="stylesheet" href="main.css">
    <meta charset="utf-8">
    <title>Contact Me</title>

  </head>

  <body>
    <header class='header'>
      <div class='container'>
        <img class="logo-kekw" src="icons/kekw.png" alt="kekw">
        <nav>
          <ul>
            <li>
              <a href='index.html'>Home</a>
            </li>
            <li>
              <a href="#">Learning</a>
            </li>
            <li>
              <a href="#box-title">Hobbies</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <div id="box">

      <div id="box-title">
        I am learning about:
      </div>
      <div id="content">box-models, box-sizing, margins, padding, @media, and more currently.</div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
    </div>

    <div id="box">
      <div id="hobbies">
        Hobbies:
      </div>
      <div id="content">Skateboarding, programming in html, css, javascript (yet to learn), python, biking, longboarding, hiking, snowboarding.</div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
    </div>
    <div id="container-footer">
      <footer id="footer">
        <ul id="ul-footer">
          <li id="email"><a href="">Email me</a></li>
          <li id="instagram"><a href="">Instagram</a></li>
          <li id="kik"><a href="">Kik</a></li>
        </ul>
      </footer>
    </div>
  </body>

</html>

在这里，您正在应用

左边距：25px

，这将导致在较小的屏幕上，这些链接将跳转到父级下方，因为它们没有足够的空间。与正在应用的页眉徽标相同

左边距：42px

。只需获取此边距值并再次检查结果

如果您想摆脱这个问题，请查看

flex-box

或

grid

布局。互联网上有很多资源，只需搜索即可。

在这里，您正在应用

左边距：25px

，这将导致在较小的屏幕上，这些链接将跳转到父级下方，因为它们没有足够的空间。与正在应用的页眉徽标相同

左边距：42px

。只需获取此边距值并再次检查结果

如果您想摆脱这个问题，请查看

flex-box

或

grid

布局。互联网上有很多资源，只需搜索即可。

我对你的问题的建议是保持固定的字体大小，当它向下移动时，你可以使用响应菜单栏。这样回家，学习和爱好将永远保持可读性

我稍微修改了一下你的CSS代码（3次

/*添加*/

），这样你就能明白我的意思（调整大小，你就会看到导航背景颜色从绿色变为红色）

.container{
宽度：80%；
保证金：0自动；
显示：内联；/*添加*/
}
.标题{
字体大小：24px；
宽度：100%；
高度：100px；
背景色：rgb（18 39 45）；
位置：固定；
线高：50px；
排名：0；
左：0；
边框底部：1px纯绿松石色；
}
.kekw标志：悬停{
边界半径：50%；
}
.kekw标志{
边界半径：50%；
边框：#62b862dc实心2px；
填充：1.8px 1.8px；
高度：75px；
宽度：75px；
浮动：左；
边缘顶部：9px；
左边距：42px；
}
.标题导航{
浮动：对；
右边填充：35px；
线高：50px；
背景色：绿色；/*添加*/
}
.标题nav ul li{
列表样式：无；
显示：内联块；
左边距：25px；
}
.标题导航ul li a：悬停{
过渡时间：.3s；
颜色：白色；
}
.标题导航ul li a{
文字装饰：无；
颜色：#f67600；
左边距：10px；
右边距：10px；
光标：十字线；
字体大小：30px；
}
.header.shadow{
盒影：0 3px 5px rgba（57,63,72,0.3）；
}
身体{
身高：100%；
背景色：#100e17；
边缘顶部：120px；
}
#箱名{
字母间距：2px；
字体系列：-苹果系统，BlinkMacSystemFont，'Segoe UI'，Roboto，Oxygen，Ubuntu，Cantarell，'Open Sans'，'Helvetica Neue'，Sans serif；
框大小：边框框；
保证金：0；
字号：28px；
字号：600；
文本对齐：居中；
颜色：白色；
文本转换：大写；
边缘底部：25px；
利润上限：15px
}
#方框#内容{
填充：10px；
边框：2件纯黑；
}
#爱好{
框大小：边框框；
字母间距：2px；
字体系列：-苹果系统，BlinkMacSystemFont，'Segoe UI'，Roboto，Oxygen，Ubuntu，Cantarell，'Open Sans'，'Helvetica Neue'，Sans serif；
保证金：0；
字号：28px；
字号：600；
文本对齐：居中；
颜色：白色；
文本转换：大写；
边缘底部：25px；
利润上限：15px
}
#盒子{
背景色：rgb（94125/50%）；
填充：10px；
边框：纯色2px黑色；
保证金：自动；
宽度：75%；
高度：400px；
框大小：边框框；
溢出：滚动；
边缘底部：150px；
}
#内容{
边缘顶部：10px；
字体大小：16px；
背景色：#62b862dc；
文本对齐：居中；
/*绿色的*/
}
#页脚{
字体系列：“Lucida控制台”、Courier、monospace；
位置：固定；
左：0；
底部：0；
宽度：100%；
背景色：rgb（18 36 41）；
边框顶部：1件纯绿松石色；
文本对齐：居中；
高度：70像素；
}
#页脚ulli{
显示：内联；
}
#页脚ulli a{
文字装饰：无；
字体大小：32px；
右边距：10px；
字体系列：“proxima nova”，无衬线；
填料：2米1米；
颜色：#f67600；
背景色：黑色；
边框：1px纯白；
}
#页脚：悬停{
背景色：#f67600；
过渡时间：.3s；
颜色：黑色；
边框：纯色1px白色；
}
/*
#电子邮件a：悬停{
背景色：黑色；
转换持续时间：.1s；
颜色：#ffffff；
边框：实心2px；
文本阴影：2px 8px 6px rgba（0,0,0,0.2），0px-5px 35px rgba（255,255,0.3）；
左：3%；
右：3%；
}
*/
：-webkit滚动条{
宽度：5px；
}
/*跟踪*/
：-webkit滚动条轨迹{
溢出：隐藏；
}
/*处理*/
：-webkit滚动条拇指{
背景：#1aa260；
}
/*悬停手柄*/
：-webkit滚动条拇指：悬停{
背景：#7a00708c；
}
@媒体屏幕和屏幕（最大宽度：900px）{
身体{
字体大小：32px；
}
}
@媒体屏幕和（最大宽度：660px）{/*添加*/
/*响应菜单栏*/
.标题导航{
背景色：红色；
}
}


联系我








h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
li {
  font-family: "proxima-nova", sans-serif;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.header {
  font-size: 24px;
  width: 100%;
  height: 100px;
  background-color: rgb(18 39 45);
  position: fixed;
  text-align: center;
  line-height: 50px;
  top: 0;
  left: 0;
  border-bottom: 1px solid turquoise;
}

.logo-kekw:hover {
  border-radius: 50%;
}

.logo-kekw {
  border-radius: 50%;
  border: #62b862dc solid 2px;
  padding: 1.8px 1.8px;
  height: 75px;
  width: 75px;
  float: left;
  margin-top: 9px;
  margin-left: 42px;
}

.header nav {
  float: right;
  padding-right: 35px;
  line-height: 50px;
}

.header nav ul li {
  list-style: none;
  display: inline-block;
  margin-left: 25px;
}

.header nav ul li a:hover {
  transition-duration: .3s;
  color: white;
}

.header nav ul li a {
  text-decoration: none;
  color: #f67600;
  font-size: 40px;
  margin-left: 10px;
  margin-right: 10px;
  cursor: crosshair;
}

.header.shadow {
  box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}

body {
  height: 100%;
  background-color: #100e17;
  margin-top: 120px;
}

#box-title {
  letter-spacing: 2px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  box-sizing: border-box;
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  color: white;
  text-transform: uppercase;
  margin-bottom: 25px;
  margin-top: 15px
}

#box #content {
  padding: 10px;
  border: 2px solid black;
}

#hobbies {
  box-sizing: border-box;
  letter-spacing: 2px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  color: white;
  text-transform: uppercase;
  margin-bottom: 25px;
  margin-top: 15px
}

#box {
  background-color: rgb(94 94 125 / 50%);
  padding: 10px;
  border: solid 2px black;
  margin: auto;
  width: 75%;
  height: 400px;
  box-sizing: border-box;
  overflow: scroll;
  margin-bottom: 150px;
}

#content {
  margin-top: 10px;
  font-size: 16px;
  background-color: #62b862dc;
  text-align: center;
  /*green*/
}

#footer {
  font-family: "Lucida Console", Courier, monospace;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgb(18 36 41);
  border-top: 1px solid turquoise;
  text-align: center;
  height: 70px;
}

#footer ul li {
  display: inline;
}

#footer ul li a {
  text-decoration: none;
  font-size: 32px;
  margin-right: 10px;
  font-family: "proxima-nova", sans-serif;
  padding: .2em 1em;
  color: #f67600;
  background-color: black;
  border: 1px solid white;
}

#footer ul li a:hover {
  background-color: #f67600;
  transition-duration: .3s;
  color: black;
  border: solid 1px white;
}


/*
#email a:hover {
    background-color: black;
    transition-duration: .1s;
    color: #ffffff;
    border: solid 2px;
    text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
    padding-left: 3%;
    padding-right: 3%;
}
*/

::-webkit-scrollbar {
  width: 5px;
}


/* Track */

::-webkit-scrollbar-track {
  overflow: hidden;
}


/* Handle */

::-webkit-scrollbar-thumb {
  background: #1aa260;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: #7a00708c;
}

@media screen and (max-width: 900px) {
  body {
    font-size: 32px;
  }
}

@media screen and (min-width: 695px) and (max-width: 950px) {
  .header nav ul li a {
    font-size: 20px;
  }
}

@media screen and (min-width: 633px) and (max-width: 695px) {
  .header nav ul li a {
    font-size: 15px;
  }
}

@media screen and (min-width: 400px) and (max-width: 632px) {
  .header nav ul li a {
    font-size: 8px;
  }
}


.header nav {
    float: right;
    line-height: 50px;
}

ul {
    display: inline-flex;
}

@media screen and (max-width: 400px) {
    .container, ul {
        display: flex;
        flex-flow: column wrap;
    }
}