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

【问题标题】：How can i change HTML layout in responsive?如何在响应式中更改 HTML 布局？
【发布时间】：2021-10-10 04:48:16
【问题描述】：

我想在桌面和响应模式下实现以下结构。如何在响应模式下更改 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%;
}

【问题讨论】：

我怎样才能看到你的 HTML？
我添加了 HTML 代码。
你想要输出作为你的附加图像吗？
我有桌面模式的第一张图片。我想要第二张图片作为平板模式的输出。

标签： html css flexbox responsive-design grid

【解决方案1】：

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

我想这会有所帮助。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

      .class_name{ 
         width: 100%
      }

【讨论】：

如何更改网站职位的标题？
你将一个类添加到标题标签，然后使用 css 示例然后在 css 中修改它： .pos: {position:relative, left:50%}