阻止一个元素随浏览器缩放按比例缩放？

Question

我正在处理的问题的解释在pen

There's no relevant code to post here.

我正在使用的网站有一个固定的导航栏，它从页面顶部浮动一点，就像笔中的模型一样。我们收到一些与 WCAG 相关的投诉，称当页面缩放到 200% 时，导航栏会遮挡太多页面。我试图弄清楚如何修复导航栏的高度和顶部，以便在浏览器缩放时它们不会与页面的其余部分成比例地缩放。我对导航栏中的元素、文本等随页面其余部分缩放没问题，我只希望高度和顶部保持不变，这样它就不会遮挡页面的其余部分。有人可以指出我正确的道路开始吗？我希望它会涉及一些 JS 我只是无法找到有关浏览器缩放的任何可靠信息。

Answer 1

将高度添加到导航栏的百分比，如下所示：

.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>

阻止一个元素随浏览器缩放按比例缩放？

Stop one element from scaling proportionally with browser zoom?

javascript

css

zooming

wcag