是否可以根据用户的缩放来设置CSS样式？

Question

我最近开始使用HTML和CSS对我的网站进行编码其他浏览器，不幸的是，我在跨浏览器确认方面有问题。

问题是，每当人们像110％一样放大时，我的按钮导航栏就会开始分解。只有Chrome才能支持我网站的视图，并且仅在100％缩放下，或者否则它也会使我的Nav Bar Break变成碎片。请参阅下面的屏幕截图以查看差异：

正确的视图：https：//postimg.org/image/aymnhz541/

破碎的栏视图：https：//postimg.org/image/99zm3l7s7/

我使用的是那些纳维托按钮的位置绝对和相对属性，但我也尝试了似乎无法解决问题的浮点属性。我什至通过从像素（PX）更改为利润和术语的百分比（％）来检查。

所以我的确切问题是，是否有任何CSS属性或行或代码可以这样做：

a）每当用户进行Zoom时，我都可以像缩放一样编码差异，那么我的按钮会在不破坏我的Navbar的情况下减小宽度之类的代码很小？

（如果用户的缩放减少了110％，则NAVBAR的大小应为110％，如果用户缩放到75％，则我的Navbar应为原始大小的75％。）

或，如果还有其他解决方案可以防止我的Navbar损坏零件，请告诉我。我希望我的Navbar保持不变。

这是我的代码：

CSS：

.contact {
    background-color: #767676;
    color: white;
    margin: -4px;
    margin-top: 0%;
    margin-right: -5%;  
    float: right;
    padding: 16px;
    display: inline-block;
    padding-bottom: 12px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    border-top-right-radius: 15px; }
.contact:link {
    color: white; }
.contact:visited {
    color: white; }
.contact:unvisited {
    color: white; }
.contact:hover {
    background-color: #e6e6e6;
    color: #336699;
    font-weight: bold;
    text-decoration: none; }
.homin {
    position: static;
    background-color: #767676;
    border: none;
    border-top-left-radius: 15px;
    color: white;
    width: 10%;
    padding: 1.6%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin: 0px;
    cursor: pointer; }
.homin:link {
    color: white; }
.homin:visited {
    color: white; }
.homin:unvisited {
    color: white; }
.homin:hover {
    background-color: #e6e6e6;
    color: #336699;
    font-weight: bold;
    text-decoration: none; }
/* Dropdown2 Button */
.Wds {
    background-color: #767676;
    color: white;
    margin: -4px;  
    width: 110%;
    padding: 18%;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    border-radius: 0px;
     }
.Windows {
    position: relative;
    display: inline-block; }
.Windowsdropdown2-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin: 4px;
    margin-left: -4px; }
.Windowsdropdown2-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block; }
.Windowsdropdown2-content a:hover {background-color: #f1f1f1}
.Windows:hover .Windowsdropdown2-content {
    display: block;
    z-index:9999; }
.Windows:hover .Wds {
    background-color: #e6e6e6;
    color: #336699;
    font-weight: bold; }
/* Dropdown3 Button */
.Mc {
    background-color: #767676;
    color: white;
    margin: -4px;
    width: 110%;
    padding: 18%;  
    position: relative;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    border-radius: 0px;
     }
.Mac {
    position: relative;
    display: inline-block; }
.Macdropdown2-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin: 4px;
    margin-left: -4px; }
.Macdropdown2-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block; }
.Macdropdown2-content a:hover {background-color: #f1f1f1}
.Mac:hover .Macdropdown2-content {
    display: block;
    z-index:9999; }
.Mac:hover .Mc {
    background-color: #e6e6e6;
    color: #336699;
    font-weight: bold; }

/* Dropdown3 Button */
.Lx {
    background-color: #767676;
    color: white;
    margin: -4px;  
    width: 110%;
    padding: 16%;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    border-radius: 0px;
     }
.Linux {
    position: relative;
    display: inline-block; }
.Linuxdropdown2-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin: 4px;
    margin-left: -4px; }
.Linuxdropdown2-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block; }
.Linuxdropdown2-content a:hover {background-color: #f1f1f1}
.Linux:hover .Linuxdropdown2-content {
    display: block;
    z-index:9999; }
.Linux:hover .Lx {
    background-color: #e6e6e6;
    color: #336699;
    font-weight: bold; }

/* Dropdown5 Button */
.Us {
    background-color: #767676;
    color: white;
    margin: -4px;  
    position: relative;
    width: 140%;
    padding: 11%;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    border-radius: 0px;
     }
.USB {
    position: relative;
    display: inline-block; }
.USBdropdown2-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin: 4px;
    margin-left: -4px;
    margin-right: 0px; }
.USBdropdown2-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block; }
.USBdropdown2-content a:hover {background-color: #f1f1f1}
.USB:hover .USBdropdown2-content {
    display: block;
    z-index:9999; }
.USB:hover .Us {
    background-color: #e6e6e6;
    color: #336699;
    font-weight: bold; }
/* Dropdown5 Button */
.Serv {
    background-color: #767676;
    color: white;
    width: 120%;
    margin-left: 40px;
    padding: 8%;
    padding-bottom: 4%;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    border-radius: 0px;
     }
.Server {
    position: relative;
    display: inline-block; }
.Serverdropdown2-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin: 4px;
    margin-left: -4px;
    margin-right: 0px; }
.Serverdropdown2-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block; }
.Serverdropdown2-content a:hover {background-color: #f1f1f1}
.Server:hover .Serverdropdown2-content {
    display: block;
    z-index:9999; }
.Server:hover .Serv {
    background-color: #e6e6e6;
    color: #336699;
    font-weight: bold; } 

html代码：

<a href="link" class="homin">home</a>
<div class="Linux">   <button class="Lx">HowTo Guides</button>   <div class="Linuxdropdown2-content">
    <a href="link">link name</a>
    <a href="link">name</a>
    <a href="link">See More >></a>   </div> </div> <div class="Windows">   <button class="Wds">HowTo Fixes</button>   <div class="Windowsdropdown2-content">
    <a href="link">link name</a>
    <a href="link">name</a>
    <a href="link">See More >></a>   </div> </div> <div class="USB">   <button class="Us">Virus And Hijackers&nbsp</button>   <div class="USBdropdown2-content">
    <a href="link">link name</a>
    <a href="link">name</a>
    <a href="link">See More >></a>   </div> </div> <div class="Server">   <button class="Serv">&nbsp5xx Server Error Solutions&nbsp</button>   <div class="Serverdropdown2-content">
    <a href="link">link name</a>
    <a href="link">name</a>
    <a href="link">See More >></a>   </div> </div> <a href="link" class="contact"> name</a>

Answer 1

简短答案 - 不，您无法基于浏览器Zoom样式。但是，您可以考虑一些事情。像容器宽度与流体，定位等一样，如果您添加了代码的小提琴，而不仅仅是图像，那将会更有用。