元素无法从纵向切换到横向 ipad

Question

我在横向和纵向模式下对 ipad 进行媒体查询，以便在每个视图中以某种方式定位元素。我的一切看起来都应该是这样，但是当我从纵向旋转到横向时，设计就会中断。如果我在横向上刷新，正确的布局会卷土重来，但我不明白为什么它会从纵向变为横向。从横向旋转到纵向时我没有任何问题。

这是 HTML

<main class="cf container">
    <section class="cf weather-forecast">
        <div class="loc-time">
            <h1 id="location"></h1>
            <p class="day" id="day"></span></p>
        </div>

        <div class="cf main-forecast">
            <p class="temp" id="temp"></p>
            <p class="summary" id="summary"></p>
            <p class="icon" data-icon="" id="icon"></p>
        </div>

        <hr>

        <div class="sub-forecast">
            <p>Feels Like <span class="sub-forecast--feels" id="feels"></span></p>
            <p>Windspeed <span class="sub-forecast--wind" id="wind"></span></p>
            <p>Humidity <span class="sub-forecast--humidity" id="humidity"></span></p>
        </div>

        <footer>
            <p>Weather source <a href="http://www.weather.com/"></a>weather.com</p>
        </footer>
    </section>
</main>

and CSS
     body,
    html {
  background-color: #ffffff;
  height: 100%;
}

body {
  font-family:"Apercu Light", Calibri, sans-serif;
  font-size: 100%;
  font-size-adjust:0.508;
  font-style:normal;
  font-weight:200;
}

.container {
  min-height: 100%;
  margin: 0 auto;
  position: relative;
  width: 80%; /* 1280 / 16 */
}

.day {
  font-size: 1.000em;
}

.icon {
  font-size: 4.688rem;
  margin-left: 5.21472392638%;
  top: 4.063rem;
}

#location {
  font-size: 1.500em;
}

.icon,
.summary {
  position: absolute;
}

.icon,
.temp,
.summary {
  display: inline-block;
}

.summary {
  font-size: 1.063em;
  margin-left: 5.36809815951%;
  top: 1.875em;
}

.main-forecast {
  position: relative;
  margin-bottom: 1.250em;
  margin-top: 2.188em;
}

.sub-forecast {
  margin-top: 1.875em;
  width: 40%;
  max-width: 222px;
}

.sub-forecast > p {
  line-height: 24px;
}

.sub-forecast--feels {
  margin-left: 43.2432432432%; /* 96 / 252 */
}

.sub-forecast--humidity {
  margin-left: 45.045045045%; /* 100 / 222 */
}

.sub-forecast--wind {
  margin-left: 38.2882882883%;
}

.temp {
  font-size: 8.438em;
}

.temp-fahrenheit {
  font-size: 2.188rem;
  margin-left: 1.250rem;
  vertical-align: super;
}

.weather-forecast {
  margin-left: 8.875em;
  margin-top: 20.438em;
  width: 50.9375%; /* 652 / 1280 */
}

footer {
  bottom: 0;
  font-family:"Apercu Regular", Calibri, sans-serif; 
  font-size: 0.688em;
  font-weight:normal;
  position: fixed;
}

/*--------------------------media Queries----------------------------------------*/

/***** 
  Tablet
*****/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  .sub-forecast {
    min-width: 238px;
  }

  .weather-forecast {
    margin-top: 12.188em;
  }
} /* end @media max-width: 728px orientation: landscape */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  .icon {
    padding-top: 10px;
  }

  .icon,
  .summary {
    margin: 0;
    position: static;
  }

  .icon,
  .temp,
  .summary {
    display: block;
  }

  .sub-forecast {
    min-width: 240px;
  }

  .weather-forecast {
    margin-top: 16.500em;
  }
} /* end @media max-width: 1024px orientation: portrait */

Answer 1

我想知道如果您所说的与字体大小有关的问题发生了变化，请尝试将此行添加到您的 CSS 中，如果有帮助的话。

body { -webkit-text-size-adjust: none; }

编辑：问题可能实际上与position: absolute; 相关，没有设置特定位置，并且在切换方向时会混淆。尝试将其添加到全局 CSS 中（不在媒体查询中）：

.icon,
.summary {
  position: absolute;
  top: 0; /*new*/
  right: 0; /*new*/
}

如果仍然无法正常工作，请尝试将代码添加到 landscape 媒体查询中。