堆棧內存溢出
  簡體   English   中英

CSS 媒體查詢以及如何使徽標居中

[英]CSS media-queries and how to center a logo

 原文  2022-09-06 00:08:46  7   2    html/ css/ responsive-design/ frontend/ media-queries

問題描述

我被這個問題困擾了整整一個小時，當它是 786px 或更低時，我無法將徽標水平居中，此外，我無法 position 包括“Web 開發人員/ ui 設計師”在內的文本在以更大的分辨率存在時相同，看看媒體查詢代碼...

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.0">
    <link rel="stylesheet" href="styles.css">
    <title>Home</title>
</head>
<body>
    <section class="navigationBar">
        <header><h2>meddhiaka's Portfolio</h2></header>
        <nav>
            <div id="navChild">About</div>
            <div id="navChild">Work</div>
            <div id="navChild">Contact</div>
        </nav>
    </section>
    <section class="fullNamePart">
        <p id="fullName">Hey, I'm Med Dhia <span></span></p>
        <p id="profession">a web developer/ ui designer</p>
    </section>
</body>
</html>

CSS 代碼：

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;500;800;900&display=swap');

body{
    margin: 0;
    padding: 0;
    font-family: 'Work Sans', sans-serif;
}

.navigationBar{
    width: 100%;
    height: 55px;
    animation: backgroundColorVar 2s linear infinite;
    border-bottom: 3px solid black;
    position: fixed;
    z-index: 99;
}

.navigationBar > nav{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    margin-left: 20px;
}

@media (max-width: 768px) {
    .navigationBar{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 80px;
    }
    .navigationBar > nav{
        justify-content: center;
        position: relative;
        top: 25px;
    }

    .navigationBar header{
        position: relative;
        z-index: 3;
        margin: auto;
        margin-bottom: 30px;
    }

    .fullNamePart{
        padding-left: 7px;
    }

    #profession{
        font-size: 25px !important;
        position: relative !important;
        bottom: 70px !important;
        left: 20px !important;
    }
}

#navChild{
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 2px;
    color: #fff;
    font-weight: 500;
    cursor:pointer;
    transition: color 1s, transform 2s;
}

#navChild:hover{
    color: black;
    transform: scale(1.2);
}

.navigationBar header{
    position: fixed;
    left: 10px;
    top: -4px;
    color: #fff;
    font-weight: 900;color: white;
    text-shadow:
      0 1px 0px black,
      1px 0 0px black,
      1px 2px 1px black,
      2px 1px 1px black,
      2px 3px 2px black,
      3px 2px 2px black,
      3px 4px 2px black,
      4px 3px 3px black,
      4px 5px 3px black,
      5px 4px 2px black,
      5px 6px 2px black,
      6px 5px 2px black;
    cursor: pointer;
    word-spacing: 2px;
    transition: 0.3s;
}

.navigationBar header:hover{
    transform: scale(1.05);
}

.fullNamePart{
    width: 100%;
    height: 100vh;
    padding-top: 4vh;
    animation: fullNameBackground 4s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

#fullName{
    font-weight: 900;
    font-size: 60px;
}

#profession{
    position: relative;
    bottom: 70px;
    font-size: 30px;
    color: #fff;
    font-style: italic;
    font-weight: 200;
}









@keyframes backgroundColorVar{
    0%{
        background-color: brown;
    }
    50%{
        background-color: rgb(118, 0, 0);
    }
    100%{
        background-color: brown;
    }
}

@keyframes fullNameBackground{
    0%{
        background:     radial-gradient(
            circle at right, 
            white,
            brown 30%
          );
    }
    10%{
        background:     radial-gradient(
            circle at right, 
            white,
            brown 30.5%
          );
    }
    20%{
        background:     radial-gradient(
            circle at right, 
            white,
            brown 31%
          );
    }
    30%{
        background:     radial-gradient(
            circle at right, 
            white,
            brown 31.5%
          );
    }
    40%{
        background:     radial-gradient(
            circle at right, 
            white,
            brown 32%
          );
    }
    50%{
        background:     radial-gradient(
            circle at right, 
            white,
            brown 32.5%
          );
    }
    60%{
        background:     radial-gradient(
            circle at right, 
            white,
            brown 32%
          );
    }
    70%{
        background:     radial-gradient(
            circle at right, 
            white,
            brown 31.5%
          );
    }
    80%{
        background:     radial-gradient(
            circle at right, 
            white,
            brown 31%
          );
    }
    90%{
        background:     radial-gradient(
            circle at right, 
            white,
            brown 30.5%
          );
    }
    100%{
        background:     radial-gradient(
            circle at right, 
            white,
            brown 30%
          );
    }
    }

2 個解決方案

解決方案1
 0  2022-09-06 00:15:22

這是因為您的<header>有一個position: fixed 。 您所要做的就是不要級聯它。 將其移動到@media查詢之前。

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;500;800;900&display=swap');

body{
  margin: 0;
  padding: 0;
  font-family: 'Work Sans', sans-serif;
}

.navigationBar{
  width: 100%;
  height: 55px;
  animation: backgroundColorVar 2s linear infinite;
  border-bottom: 3px solid black;
  position: fixed;
  z-index: 99;
}

.navigationBar > nav{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  margin-left: 20px;
}

.navigationBar header{
  position: fixed;
  left: 10px;
  top: -4px;
  color: #fff;
  font-weight: 900;color: white;
  text-shadow:
    0 1px 0px black,
    1px 0 0px black,
    1px 2px 1px black,
    2px 1px 1px black,
    2px 3px 2px black,
    3px 2px 2px black,
    3px 4px 2px black,
    4px 3px 3px black,
    4px 5px 3px black,
    5px 4px 2px black,
    5px 6px 2px black,
    6px 5px 2px black;
  cursor: pointer;
  word-spacing: 2px;
  transition: 0.3s;
}

@media (max-width: 768px) {

  .navigationBar{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 80px;
  }
  .navigationBar > nav{
    justify-content: center;
    position: relative;
    top: 25px;
  }

  .navigationBar header{
    position: relative;
    z-index: 3;
    margin: auto;
    margin-bottom: 30px;
  }

  .fullNamePart{
    padding-left: 7px;
  }

  #profession{
    font-size: 25px !important;
    position: relative !important;
    bottom: 70px !important;
    left: 20px !important;
  }
}

#navChild{
  padding-left: 15px;
  padding-right: 15px;
  margin-left: 2px;
  color: #fff;
  font-weight: 500;
  cursor:pointer;
  transition: color 1s, transform 2s;
}

#navChild:hover{
  color: black;
  transform: scale(1.2);
}

.navigationBar header:hover{
  transform: scale(1.05);
}

.fullNamePart{
  width: 100%;
  height: 100vh;
  padding-top: 4vh;
  animation: fullNameBackground 4s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

#fullName{
  font-weight: 900;
  font-size: 60px;
}

#profession{
  position: relative;
  bottom: 70px;
  font-size: 30px;
  color: #fff;
  font-style: italic;
  font-weight: 200;
}

普通視圖：

預習

移動視圖：

預習

解決方案2
 0  2022-09-06 05:24:12

在此處輸入圖像描述

@media(max-width:575px){
    .navigationBar header{
        left:0;
        right:0;
        text-align:center;
    }
}

暫無
暫無

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

相關問題 體內的CSS媒體查詢 @ media-queries無法使用屏幕尺寸CSS 如何使用媒體查詢來更改html 頁面如何與媒體查詢關聯縮放？ 媒體查詢無效 HTML，CSS和媒體查詢-在Chrome和firefox上調整大小不同 為什么Google Chrome瀏覽器會影響我的CSS @ media-queries？ 響應式設計-使用JavaScript和CSS更改布局（Flex和媒體查詢） ReSharper CSS錯誤結合媒體查詢 您如何制作一個沒有媒體查詢的響應式網站？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM