如何在响应式中更改 HTML 布局？

Question

我想在桌面和响应模式下实现以下结构。如何在响应模式下更改 html 的布局？

<div class="header grid py-3">
    <div class="logo_and_title grid">
         <div class="logo grid">
            <a id="logoid" href="/" class=" me-3"><img src="logo.png" width="100%" class="img-fluid" ></a>
            <h1 id="nameid">Title of website</h1>
         </div>
    </div>
    <div class="menu">
        <!-- list of menu items-->
    </div>
<div>

CSS 桌面代码为：

.grid{
    display: grid;
}
.logo_and_title.grid{
    grid-template-columns: 3fr 7fr;
    grid-gap:1rem;
}
.logo.grid{
    grid-template-columns: 2fr 7fr;
}

#nameid,#logoid,.menu{
    align-self: center;
}
header{
    width:100%;
}

Answer 1

在构建响应式网页时使用百分比而不是 px 有很大帮助

      .class_name{ 
         width: 100%
      }

Answer 2

试试这个：

.header {
  background: #002147;
  color: #fff;
  padding: 8px 20px;
  font-family: arial;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.logo a {
  display: flex;
}

.logo img {
  max-width: 60px;
  height: 60px;
  border: 2px solid #fff; 
}

.nameid {
  margin: 0 0 0 15px;
  font-size: 20px;
}

.menu .nameid {
  display: none; 
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  margin-right: 10px;
}

@media (max-width: 860px) {
  .header {
    display: flex;
    justify-content: flex-start;
  }
  
  .menu {
    margin-left: 15px;
  }

  .nameid {
    display: none;
  }

  .menu .nameid {
    display: block; 
    margin: 0 0 5px 0;
  }
}

  <div class="header">
    <div class="logo_and_title">
      <div class="logo">
        <a id="logoid" href="/">
          <img src="https://www.daily-sun.com/assets/news_images/2017/01/12/DAILYSUN_ZYAN.jpg" width="100%" class="img-fluid" >
        </a>
        <h1 class="nameid">Title of website</h1>
      </div>
    </div>
    <div class="menu">
      <h1 class="nameid">Title of website</h1>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
      </ul>
    </div>
  <div>

Answer 3

阅读 Bootstrap 官方文档中的以下文档： https://getbootstrap.com/docs/5.1/layout/grid/

我想这有帮助。

如何在响应式中更改 HTML 布局？

How can i change HTML layout in responsive?

html

css

grid

flexbox

responsive-design