从纵向切换到横向的元素无法放置在正确的位置 ipad
elements not going to proper position switching from portrait to landscape ipad
我有 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 */
我想知道如果您所说的问题与字体大小有关,请尝试将此行添加到您的 CSS 中,如果有帮助的话。
body { -webkit-text-size-adjust: none; }
编辑: 问题实际上可能与 position: absolute;
有关,没有设置特定位置,并且在切换方向时会混淆。尝试将其添加到全局 CSS (不在媒体查询中):
.icon,
.summary {
position: absolute;
top: 0; /*new*/
right: 0; /*new*/
}
如果仍然无法正常工作,请尝试将代码添加到 landscape
媒体查询中。
我有 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 */
我想知道如果您所说的问题与字体大小有关,请尝试将此行添加到您的 CSS 中,如果有帮助的话。
body { -webkit-text-size-adjust: none; }
编辑: 问题实际上可能与 position: absolute;
有关,没有设置特定位置,并且在切换方向时会混淆。尝试将其添加到全局 CSS (不在媒体查询中):
.icon,
.summary {
position: absolute;
top: 0; /*new*/
right: 0; /*new*/
}
如果仍然无法正常工作,请尝试将代码添加到 landscape
媒体查询中。