css - Mac 和 Windows CSS 的区别
问题描述
当我在 Mac 上的 Chrome 上查看此页面时,h1 文本在一行上,并与桌面屏幕上的视口正确缩放。但是,在 Windows 机器上的 Chrome 中,h1 文本分成两行。我不确定操作系统/浏览器默认样式之间有什么区别,但我想始终正确地将文本大小缩放为桌面的一行(后面有金条)。我将 Foundation 6 用于一些响应式课程
Mac 截图 查看 Mac 截图
Windows 屏幕截图 查看 Windows 屏幕截图
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);
}
}
解决方案
推荐阅读
- windows - 如何在 OS Windows 触摸屏上显示 Windows 键盘 - Flutter
- oracle - Azure 数据工厂中的 Oracle 到 Parquet 小数点丢失所有精度和规模
- http-headers - Terraform - 从 WAF 请求中排除 csrf 令牌
- awk - 比较不同长度的两个文件之间的共同值(Linux)
- c# - 隐藏所有企业名称和标记 Gmap.net
- javascript - 如何检索已计算的 CSS 规则而不是 calc 语法
- html - 当我向 div 添加 margin-top 和 margin-left 时,页面大小水平增加
- java - spring ws 使用请求证书加密响应
- python - conda 环境不适用于主管和 gunicorn
- python - 不使用 #temp 表在 DataFrame 和 SQL Server 表之间进行联接