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

Posted 2023-03-05

【中文标题】如何在响应式中更改 HTML 布局？

【英文标题】：How can i change HTML layout in responsive?

【发布时间】：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"  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 代码。

你想要输出作为你的附加图像吗？

我有桌面模式的第一张图片。我想要第二张图片作为平板模式的输出。

【参考方案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"  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 示例