使用媒体查询处理徽标及其位置

Question

正如标题所述，我的此作业徽标需要以不同的屏幕尺寸显示在屏幕的某些区域。我已正确实施移动定位，但我似乎无法找到 ipad 和更大屏幕的徽标定位解决方案。

对于大屏幕，徽标需要直接居中放置在第一个 .product 元素上方，在我的例子中是 A，如 Apple

对于 ipad 屏幕，徽标需要位于屏幕左边缘和居中 h1 元素之间的中间位置

无论我如何尝试，徽标始终固定在左侧。

我意识到在 css 中它的位置设置为 float:left 但我已将其更改为 display:flex 和各种 flexbox 属性，但它最终制造更多的问题。我已经更改了每个 @media query 中的徽标位置，但徽标最终总是停留在原位或远离它需要的位置。

我知道google是我最好的朋友，但我用尽了所有可能的方法，已经到了不得已的地步。我最不想做的就是卡住并立即 post 在这里，至少没有尝试几个小时。请原谅我的新手问题和可能很明显的问题，但我已经束手无策，真的需要帮助。谢谢。

* {
  box-sizing: border-box;
  text-align: center;
}

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
}

body>i> {
  flex-grow: 0;
}

body>header> {
  flex-grow: 1;
}

.logo>img {
  width: 50px;
}

p {
  text-align: left;
  padding: 15px;
}

.navbar {
  background-color: rgb(105, 105, 105);
  padding: 10px;
  color: white;
  width: 100%;
}

.hamburger {
  display: flex;
  flex-direction: row-reverse;
}

.social {
  display: flex;
  padding-top: 20px;
  flex-direction: row;
  justify-content: space-around;
  border-top: 2px solid #e2e2e2;
}

ul {
  list-style: none;
}

li {
  line-height: 5px;
  float: right;
  padding: 0 0 50px 0;
  margin-right: 30px;
  margin-top: -10px;
}

.product {
  border: 1px solid lightgray;
  border-radius: 10px;
  margin: 10px 30px;
  padding: 10px;
}

@media screen and (max-width: 700px) {
  .logo {
    float: left;
  }
  .menu {
    display: none;
  }
  .logo {
    float: left;
  }
}

@media screen and (max-width: 500px) {
  .logo {
    float: none;
  }
  .menu {
    display: none;
  }
}

@media screen and (min-width: 900px) {
  .hamburger {
    display: none;
  }
  .product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid lightgray;
    border-radius: 10px;
    margin-left: 30px;
    margin-right: 30px;
    width: 50%;
    text-align: center;
    margin-top: -20px;
    margin-bottom: 0px;
  }
  main {
    display: inline-flex;
  }
  .logo {
    position: absolute;
    left: 0;
    top: 25;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <header>
    <div class="logo"><img src="https://uploads.codesandbox.io/uploads/user/6eb75550-4d51-47fd-8ec1-d216b5da5e5c/M4sq-logo.jpeg" /></div>
    <h1>The ABC Company</h1>
  </header>
  <nav class="navbar">
    <div class="hamburger">&#9776;</div>
    <ul class="menu">
      <li>Help</li>
      <li>Products</li>
      <li>About</li>
      <li>Home</li>
    </ul>
  </nav>
  <main>
    <section class="product">
      <i class="fas fa-apple-alt fa-5x"></i>
      <h2>A as in Apple</h2>
      <p>
        We take out fruit very seriously at ABC, that is why the A in ABC is for Apple. Try our new AppleBook App, the coolest new technology disrupting the fruit industry. This is the Uber of Apples!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-money-bill-wave fa-5x"></i>
      <h2>B as in Bail</h2>
      <p>
        Do you need Bail! Our new BailFace app will provide you with lawyers and bail money at the push of a button. Its the Facebook of bail bonds!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-utensils fa-5x"></i>
      <h2>C as in Curry</h2>

      <p>
        Fancy some curry! Our new HurryCurry app will provide curry cooked by Italian chefs right to your door. Its the AirBnB of curry!
      </p>
    </section>
  </main>
  <footer>
    <ul class="social">
      <li class="social_icon"><i class="fab fa-twitter"></i></li>
      <li class="social_icon"><i class="fab fa-facebook"></i></li>
      <li class="social_icon"><i class="fab fa-instagram"></i></li>
    </ul>
  </footer>
</body>

</html>

Answer 1

首先对不起我的英语，我不流利，我的解决方案，我冒昧地改变了你的一些东西css。

<html lang="en">
<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
     crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" />
</head>
<style>
    *{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
}
.navbar {
    display: flex;
    flex-direction: row-reverse;
    width: 100vw;
    background-color: rgb(105, 105, 105);
    color: white;
}
    
.hamburger {
    display: flex;
    flex-direction: row-reverse;
    align-content: center;
    align-self: center;
    justify-content: flex-start;
    margin-right: 10px;
    display: none;
}
    
.social {
    display: flex;
    padding-top: 20px;
    flex-direction:row;
    justify-content:space-around; 
    border-top: 2px solid #e2e2e2;
    }
.menu{
    display: inherit;
    list-style: none;
}
    
    
.navbar ul li {
    display: inline;
    padding: 0 15px;
}
    
.product {
    border: 1px solid lightgray;
    border-radius: 10px;
    margin: 10px 30px;
    padding:10px;
}

header{
    display: flex;
    flex-direction: row;
    
    
}

header h1 {
    display: inherit;
    flex-grow: 1;
    align-content: center;
    align-self: center;
    align-items: center;
    justify-content: flex-start;
}



.logo{
    display: inherit;
    align-content: center;
    align-self: center;
    align-items: center;
    flex-grow: 1;
    justify-content: center;
    
}

.logo > img{
    width: 50px;
    height: 50px;
}

@media (max-width: 900px) {
    .hamburger {
      display: none;
    }
    main{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
 
    .product {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      align-self: center;
      align-content: center;
      border: 1px solid lightgray;
      border-radius: 10px;
      width: 50vw;
      text-align: center;
    }
}

@media (max-width:700px){
    .navbar ul li{
        display: none;
    }
    .hamburger{
        display: block;
    }
}

@media (max-width: 400px){
    header h1 {
        display: inherit;
        flex-grow: 1;
        align-content: center;
        align-self: center;
        align-items: center;
        justify-content: flex-start;
        font-size: 1.5rem;
    }
}
</style>
<body>
  <header>
        <div class="logo"><img src="https://uploads.codesandbox.io/uploads/user/6eb75550-4d51-47fd-8ec1-d216b5da5e5c/M4sq-logo.jpeg"/></div>
        <h1>The ABC Company</h1>
    </header>
    <nav class="navbar">
        <div class="hamburger">&#9776;</div>
        <ul class="menu">
            <li>Help</li>
            <li>Products</li>
            <li>About</li>
            <li>Home</li>
        </ul>
    </nav>
    <main>
    <section class="product">
         <i class="fas fa-apple-alt fa-5x"></i>
            <h2>A as in Apple</h2>
            <p>
            We take out fruit very seriously at ABC, that is why
            the A in ABC is for Apple. Try our new AppleBook App,
            the coolest new technology disrupting the fruit industry.
            This is the Uber of Apples! 
            </p>
        </section>
        <section class="product">
            <i class="fas fa-money-bill-wave fa-5x"></i>
            <h2>B as in Bail</h2>
            <p>
                Do you need Bail! Our new BailFace app will provide you
                with lawyers and bail money at the push of a button. Its the 
                Facebook of bail bonds!
            </p>
        </section>
        <section class="product">
            <i class="fas fa-utensils fa-5x"></i>
            <h2>C as in Curry</h2>

            <p>
                Fancy some curry! Our new HurryCurry app will provide curry
                cooked by Italian chefs right to your door. Its the AirBnB of curry!
            </p>
        </section>
    </main>
  <footer>
        <ul class="social">
            <li class="social_icon"><i class="fab fa-twitter"></i></li>
            <li class="social_icon"><i class="fab fa-facebook"></i></li>
            <li class="social_icon"><i class="fab fa-instagram"></i></li>
        </ul>
    </footer>
</body>
</html>

Answer 2

试试这个：

将header分成3等份

header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

使徽标图像居中

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

制作标题现在换行

header h1 {
  white-space: nowrap;
}

查看代码段的外观。我在媒体查询中评论了所有浮动和绝对定位。

* {
  box-sizing: border-box;
  text-align: center;
}

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
}

body>i> {
  flex-grow: 0;
}

body>header> {
  flex-grow: 1;
}

.logo>img {
  width: 50px;
}

p {
  text-align: left;
  padding: 15px;
}

.navbar {
  background-color: rgb(105, 105, 105);
  padding: 10px;
  color: white;
  width: 100%;
}

.hamburger {
  display: flex;
  flex-direction: row-reverse;
}

.social {
  display: flex;
  padding-top: 20px;
  flex-direction: row;
  justify-content: space-around;
  border-top: 2px solid #e2e2e2;
}

ul {
  list-style: none;
}

li {
  line-height: 5px;
  float: right;
  padding: 0 0 50px 0;
  margin-right: 30px;
  margin-top: -10px;
}

.product {
  border: 1px solid lightgray;
  border-radius: 10px;
  margin: 10px 30px;
  padding: 10px;
}

header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

header h1 {
  white-space: nowrap;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 700px) {
  /*.logo {
    float: left;
  }*/
  .menu {
    display: none;
  }
  /*.logo {
    float: left;
  }*/
}

@media screen and (max-width: 500px) {
  /*.logo {
    float: none;
  }*/
  .menu {
    display: none;
  }
  header {
    display: block;
  }
}

@media screen and (min-width: 900px) {
  .hamburger {
    display: none;
  }
  .product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid lightgray;
    border-radius: 10px;
    margin-left: 30px;
    margin-right: 30px;
    width: 50%;
    text-align: center;
    margin-top: -20px;
    margin-bottom: 0px;
  }
  main {
    display: inline-flex;
  }
  /*.logo {
    position: absolute;
    left: 0;
    top: 25;
  }*/
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <header>
    <div class="logo"><img src="https://uploads.codesandbox.io/uploads/user/6eb75550-4d51-47fd-8ec1-d216b5da5e5c/M4sq-logo.jpeg" /></div>
    <h1>The ABC Company</h1>
  </header>
  <nav class="navbar">
    <div class="hamburger">&#9776;</div>
    <ul class="menu">
      <li>Help</li>
      <li>Products</li>
      <li>About</li>
      <li>Home</li>
    </ul>
  </nav>
  <main>
    <section class="product">
      <i class="fas fa-apple-alt fa-5x"></i>
      <h2>A as in Apple</h2>
      <p>
        We take out fruit very seriously at ABC, that is why the A in ABC is for Apple. Try our new AppleBook App, the coolest new technology disrupting the fruit industry. This is the Uber of Apples!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-money-bill-wave fa-5x"></i>
      <h2>B as in Bail</h2>
      <p>
        Do you need Bail! Our new BailFace app will provide you with lawyers and bail money at the push of a button. Its the Facebook of bail bonds!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-utensils fa-5x"></i>
      <h2>C as in Curry</h2>

      <p>
        Fancy some curry! Our new HurryCurry app will provide curry cooked by Italian chefs right to your door. Its the AirBnB of curry!
      </p>
    </section>
  </main>
  <footer>
    <ul class="social">
      <li class="social_icon"><i class="fab fa-twitter"></i></li>
      <li class="social_icon"><i class="fab fa-facebook"></i></li>
      <li class="social_icon"><i class="fab fa-instagram"></i></li>
    </ul>
  </footer>
</body>

</html>

Answer 3

这是一个很好的解决方案，使用 flexbox 或 css 网格：

解决问题的步骤：

从媒体查询中删除 class .logo。
在 header 元素中实现解决方案，如下所示：

* {
  box-sizing: border-box;
  text-align: center;
}

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  justify-content: space-between;
  align-items:center;
  margin: 0 30px;
}

.logo>img {
  width: 50px;
}

p {
  text-align: left;
  padding: 15px;
}

.navbar {
  background-color: rgb(105, 105, 105);
  padding: 10px;
  color: white;
  width: 100%;
}

.hamburger {
  display: flex;
  flex-direction: row-reverse;
}

.social {
  display: flex;
  padding-top: 20px;
  flex-direction: row;
  justify-content: space-around;
  border-top: 2px solid #e2e2e2;
}

ul {
  list-style: none;
}

li {
  line-height: 5px;
  float: right;
  padding: 0 0 50px 0;
  margin-right: 30px;
  margin-top: -10px;
}

.product {
  border: 1px solid lightgray;
  border-radius: 10px;
  margin: 10px 30px;
  padding: 10px;
}

@media screen and (max-width: 700px) {
  .menu {
    display: none;
  }
}

@media screen and (max-width: 500px) {
  header {
      flex-flow: column
  }
  .menu {
    display: none;
  }
}

@media screen and (min-width: 900px) {
  .hamburger {
    display: none;
  }
  .product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid lightgray;
    border-radius: 10px;
    margin-left: 30px;
    margin-right: 30px;
    width: 50%;
    text-align: center;
    margin-top: -20px;
    margin-bottom: 0px;
  }
  main {
    display: inline-flex;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <header>
    <div class="logo"><img src="https://uploads.codesandbox.io/uploads/user/6eb75550-4d51-47fd-8ec1-d216b5da5e5c/M4sq-logo.jpeg" /></div>
    <h1>The ABC Company</h1>
  </header>
  <nav class="navbar">
    <div class="hamburger">&#9776;</div>
    <ul class="menu">
      <li>Help</li>
      <li>Products</li>
      <li>About</li>
      <li>Home</li>
    </ul>
  </nav>
  <main>
    <section class="product">
      <i class="fas fa-apple-alt fa-5x"></i>
      <h2>A as in Apple</h2>
      <p>
        We take out fruit very seriously at ABC, that is why the A in ABC is for Apple. Try our new AppleBook App, the coolest new technology disrupting the fruit industry. This is the Uber of Apples!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-money-bill-wave fa-5x"></i>
      <h2>B as in Bail</h2>
      <p>
        Do you need Bail! Our new BailFace app will provide you with lawyers and bail money at the push of a button. Its the Facebook of bail bonds!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-utensils fa-5x"></i>
      <h2>C as in Curry</h2>

      <p>
        Fancy some curry! Our new HurryCurry app will provide curry cooked by Italian chefs right to your door. Its the AirBnB of curry!
      </p>
    </section>
  </main>
  <footer>
    <ul class="social">
      <li class="social_icon"><i class="fab fa-twitter"></i></li>
      <li class="social_icon"><i class="fab fa-facebook"></i></li>
      <li class="social_icon"><i class="fab fa-instagram"></i></li>
    </ul>
  </footer>
</body>

</html>

如果您需要将文本保留在 header 中间，只需使用 css 网格即可。

* {
  box-sizing: border-box;
  text-align: center;
}

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
}

header {
  flex-grow: 1;
  display: grid;
  grid-template-columns: 0 2fr;
  grid-template-rows: 1fr;
  align-items:center;
  margin: 0 30px;
}

.logo>img {
  width: 50px;
}

p {
  text-align: left;
  padding: 15px;
}

.navbar {
  background-color: rgb(105, 105, 105);
  padding: 10px;
  color: white;
  width: 100%;
}

.hamburger {
  display: flex;
  flex-direction: row-reverse;
}

.social {
  display: flex;
  padding-top: 20px;
  flex-direction: row;
  justify-content: space-around;
  border-top: 2px solid #e2e2e2;
}

ul {
  list-style: none;
}

li {
  line-height: 5px;
  float: right;
  padding: 0 0 50px 0;
  margin-right: 30px;
  margin-top: -10px;
}

.product {
  border: 1px solid lightgray;
  border-radius: 10px;
  margin: 10px 30px;
  padding: 10px;
}

@media screen and (max-width: 700px) {
  .menu {
    display: none;
  }
}

@media screen and (max-width: 500px) {
  header {
    grid-template-columns: 1fr;
  }
  .menu {
    display: none;
  }
}

@media screen and (min-width: 900px) {
  .hamburger {
    display: none;
  }
  .product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid lightgray;
    border-radius: 10px;
    margin-left: 30px;
    margin-right: 30px;
    width: 50%;
    text-align: center;
    margin-top: -20px;
    margin-bottom: 0px;
  }
  main {
    display: inline-flex;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <header>
    <div class="logo"><img src="https://uploads.codesandbox.io/uploads/user/6eb75550-4d51-47fd-8ec1-d216b5da5e5c/M4sq-logo.jpeg" /></div>
    <h1>The ABC Company</h1>
  </header>
  <nav class="navbar">
    <div class="hamburger">&#9776;</div>
    <ul class="menu">
      <li>Help</li>
      <li>Products</li>
      <li>About</li>
      <li>Home</li>
    </ul>
  </nav>
  <main>
    <section class="product">
      <i class="fas fa-apple-alt fa-5x"></i>
      <h2>A as in Apple</h2>
      <p>
        We take out fruit very seriously at ABC, that is why the A in ABC is for Apple. Try our new AppleBook App, the coolest new technology disrupting the fruit industry. This is the Uber of Apples!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-money-bill-wave fa-5x"></i>
      <h2>B as in Bail</h2>
      <p>
        Do you need Bail! Our new BailFace app will provide you with lawyers and bail money at the push of a button. Its the Facebook of bail bonds!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-utensils fa-5x"></i>
      <h2>C as in Curry</h2>

      <p>
        Fancy some curry! Our new HurryCurry app will provide curry cooked by Italian chefs right to your door. Its the AirBnB of curry!
      </p>
    </section>
  </main>
  <footer>
    <ul class="social">
      <li class="social_icon"><i class="fab fa-twitter"></i></li>
      <li class="social_icon"><i class="fab fa-facebook"></i></li>
      <li class="social_icon"><i class="fab fa-instagram"></i></li>
    </ul>
  </footer>
</body>

</html>

使用媒体查询处理徽标及其位置

Issue with the logo and its position using media queries

html

css

flexbox

web

responsive