是否停止一个元素与浏览器缩放成比例缩放



我正在处理的问题的解释在这个笔中

There's no relevant code to post here.

我正在工作的网站有一个固定的导航栏,它从页面顶部浮动一点,就像在笔中建模的那样。我们收到了一些与WCAG相关的投诉,称当页面缩放到200%时,导航栏会遮挡太多页面。我正在想办法固定导航条的高度和顶部,这样当浏览器缩放时,它们就不会与页面的其余部分成比例。我对导航栏中的元素、文本等与页面其他部分的缩放很满意,我只希望高度和顶部保持不变,这样就不会模糊页面的其他部分。有人能给我指一下正确的路吗?我预计它会涉及一些JS,我只是没能找到任何关于浏览器缩放的可靠信息。

高度添加到导航栏(以百分比为单位(,如下所示:

.navbar{
display: flex;
justify-content: center;
align-items: center;
background: DodgerBlue;
position: fixed;
top: 20px;
left: 5%;
width: 90%;
height: 15%;
}

完整的示例

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
body {
font-size: 26px;
}
.navBar {
position: fixed;
top: 1%;
left: 3%;
right: 3%;
height: 5%;
background-color: greenyellow;
font-size: 100%;
}
.content {
width: 600px;
margin: 100px auto 100px auto;
text-align: justify;
}

</style>
</head>
<body>
<div class="navBar"></div>
<div class="content">
<p>I'm baby snackwave ugh williamsburg raclette lomo put a bird on it synth tousled cornhole taiyaki chartreuse stumptown aesthetic VHS. Bicycle rights af cardigan tilde vice DIY. Kinfolk banh mi bushwick aesthetic narwhal cornhole helvetica swag shoreditch venmo small batch pour-over. Distillery meh plaid lyft enamel pin jianbing banh mi tote bag seitan palo santo migas green juice offal viral. Shaman offal woke, actually health goth tousled franzen tacos before they sold out.</p>
<p>Cronut lyft offal yuccie next level pabst mustache selfies. Woke ugh tote bag everyday carry hoodie synth. Keffiyeh stumptown offal, taiyaki kinfolk chillwave dreamcatcher single-origin coffee. Meggings snackwave bicycle rights, authentic butcher tilde art party man braid hell of. Wolf disrupt everyday carry vice, viral tofu knausgaard squid etsy celiac shoreditch edison bulb. Cray locavore mustache plaid pork belly blog dreamcatcher godard mixtape. Jean shorts heirloom biodiesel butcher blog vice, crucifix gastropub authentic bitters meh intelligentsia dreamcatcher.</p>
<p>I'm baby snackwave ugh williamsburg raclette lomo put a bird on it synth tousled cornhole taiyaki chartreuse stumptown aesthetic VHS. Bicycle rights af cardigan tilde vice DIY. Kinfolk banh mi bushwick aesthetic narwhal cornhole helvetica swag shoreditch venmo small batch pour-over. Distillery meh plaid lyft enamel pin jianbing banh mi tote bag seitan palo santo migas green juice offal viral. Shaman offal woke, actually health goth tousled franzen tacos before they sold out.</p>
<p>Cronut lyft offal yuccie next level pabst mustache selfies. Woke ugh tote bag everyday carry hoodie synth. Keffiyeh stumptown offal, taiyaki kinfolk chillwave dreamcatcher single-origin coffee. Meggings snackwave bicycle rights, authentic butcher tilde art party man braid hell of. Wolf disrupt everyday carry vice, viral tofu knausgaard squid etsy celiac shoreditch edison bulb. Cray locavore mustache plaid pork belly blog dreamcatcher godard mixtape. Jean shorts heirloom biodiesel butcher blog vice, crucifix gastropub authentic bitters meh intelligentsia dreamcatcher.</p>
</div>
</body>
</html>

相关内容

  • 没有找到相关文章