当我在 Mac 上的 Chrome 上查看此页面时,h1 文本在一行上,并随着桌面屏幕上的视口正确缩放。但是,在 Windows 机器上的 Chrome 中,h1 文本分成两行。我不确定操作系统/浏览器默认样式之间有什么区别,但我希望始终将文本大小正确缩放为桌面的一行(后面有金条)。我正在将 Foundation 6 用于一些响应式课程
Mac 屏幕截图 View Mac Screenshot
Windows 屏幕截图 View Windows Screenshot
HTML
<div id="video-header-container">
<video loop muted autoplay>
<source src="/img/home/tu-web-header.webm" type="video/webm">
<source src="/img/home/tu-web-header.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video loop muted autoplay class="hide-for-medium">
## <source src="/img/home/tu-web-header.webm" type="video/webm">
<source src="/img/home/tu-web-header-vertical.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="video-header-text">
<h1 class="white-text position-relative margin-bottom-0">ON<br class="hide-for-large"> PURPOSE</h1>
<div class="button-group stacked-for-medium margin-top-1 align-center">
<a class="button" href="/visit">Schedule Your Visit</a>
<a class="button" href="/accepted/deposit-housing">Make Your Deposit</a>
</div>
</div>
</div>
CSS
#video-header-container {
position: relative;
height: calc(100vh - 70px);
}
@media (min-width: 1024px) {
#video-header-container {
height: calc(100vh - 165px);
}
}
#video-header-container::before {
content:"";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.2);
}
#video-header-container video {
position: absolute;
background: var(--tu-purple);
width: 100%;
height:100%;
-o-object-fit: cover;
object-fit: cover;
}
#video-header-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#video-header-text h1 {
font-family: var(--font-sans);
font-weight: bold;
}
#video-header-text h1::before {
content:'';
background-color: var(--tu-gold);
position: absolute;
top: .45em;
height: .5em;
left: -5rem;
right: -5rem;
z-index: -1;
}
@media (max-width: 1023px) {
#video-header-text h1 {
font-size: 3.75rem;
}
#video-header-text h1::before {
left: 3rem;
right: 3rem;
}
#video-header-text h1::after {
content:'';
background-color: var(--tu-gold);
position: absolute;
bottom: .4em;
height: .5em;
left: -2rem;
right: -2rem;
z-index: -1;
}
}
@media (min-width: 1024px) {
#video-header-text h1 {
font-size: max(4.75rem, min(7.4vw, 7.5rem));
font-size: clamp(4.75rem, 7.49vw, 7.5rem);
}
}