我的网站的移动版本仅在刷新后才能正确加载答案

【问题标题】：Mobile version of my website only loads correctly after refresh我的网站的移动版本仅在刷新后才能正确加载
【发布时间】：2020-09-26 21:49:44
【问题描述】：

我创建了一个响应式网站，其中包含移动版本的媒体查询，但它不会为主页上的链接加载部分 CSS，但在刷新后会自行更正。有人可以帮助我了解问题所在以及为什么会这样吗？

@media only screen and (max-width: 600px) {
    
    .Design-projects {
    padding-left: 8%;
    font-size: 30px;
    padding-bottom: 5%;
  }

    .design-projects-level-1 {
    padding-left: 8%;
    font-size: 20px;
  }

    .design-projects-level-2 {
    padding-left: 8%;
    font-size: 20px;
    padding-top: 15%;
  }

    .design-projects-level-3 {
    padding-left: 8%;
    font-size: 20px;
    padding-top: 15%;
    }

    .eventsgeneral {
      text-align: right;
    }

    .Events {
      font-size: 30px;
      padding-left: 55%;
      margin-right: 0;
      padding-bottom: 5%;
    }

    .design-projects-level-4 {
      font-size: 20px;
      padding-right: 64%;
      padding-left: 0;
    }

    .design-projects-level-5 {
      font-size: 20px;
      padding-left: 5%;
      padding-right: 64%;
      padding-top: 15%;
    }

    .design-projects-level-6 {
      font-size: 20px;
      padding-left: 0;
      padding-right: 64%;
      padding-top: 15%;
    }
}

<h2 className="Design-projects">DESIGN PROJECTS  </h2>

  <div className="design-projects-level-1">
 <Link to="/Soundcloudredesign">01. Redesigning Soundcloud </Link></div>

   <div className="design-projects-level-2">
        <Link to="/ramenshop">02. The Ramen Shop</Link> </div>

    <div className="design-project-level-3">
        <Link to="/otts">03. Ott's Exotic Plants</Link> </div>


    <div className="eventsgeneral">
    <h2 className="Events">EVENTS  </h2>

    <div className="design-projects-link-level-4">
        <Link to="/westhollywood">01. West Hollywood EDITION</Link></div>

    <div className="design-projects-link-level-5">
        <Link to="/noblepanacea">02. Noble Panacea Global Brand Launch</Link></div>

    <div className="design-projects-link-level-6">
        <Link to="/ellenvonunwerth">03. Ellen von Unwerth at Fotografiska</Link></div>
  </div>

首次加载时，链接如下所示：

但它应该是这样的（但是，它只有在我刷新页面后才会这样）：

【问题讨论】：

标签： css mobile padding page-refresh

【解决方案1】：

很抱歉，但首先，您应该改进编码。您无需为每个项目创建新的 CSS 类，尤其是在完全相同的情况下。

您遇到这个问题是因为您的 CSS 代码没有用处。

您将在下面找到您要查找的代码：

@media only screen and (max-width: 600px) {

.Design-projects {
    font-size: 30px;
    padding-bottom: 5%;
    padding-left: 8%;
}

.design-projects-item{

    padding-left: 8%;
    padding-bottom: 5%;
    font-size: 20px;
}

.eventsgeneral {
    text-align: right;
    padding-right: 8%;
}

.Events {
    font-size: 30px;
    padding-bottom: 5%;
}

.events-item {
    font-size: 20px;
    padding-bottom: 5%;
}
}

<h2 class="Design-projects">DESIGN PROJECTS</h2>

<div class="design-projects-item">
  <Link to="/Soundcloudredesign">01. Redesigning Soundcloud </Link>
</div>

<div class="design-projects-item">
  <Link to="/ramenshop">02. The Ramen Shop</Link>
</div>

<div class="design-projects-item">
  <Link to="/otts">03. Ott's Exotic Plants</Link>
</div>


<div class="eventsgeneral">

  <h2 class="Events">EVENTS</h2>

  <div class="events-item">
    <Link to="/westhollywood">01. West Hollywood EDITION</Link>
  </div>

  <div class="events-item">
    <Link to="/noblepanacea">02. Noble Panacea Global Brand Launch</Link>
  </div>

  <div class="events-item">
    <Link to="/ellenvonunwerth">03. Ellen von Unwerth at Fotografiska</Link>
  </div>

</div>

【讨论】：