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

Question

我最近开始使用HTML和CSS对我的网站进行编码，今天，我从朋友那里得到的信息是我的网站在其他浏览器中看起来不太好，然后我用其他浏览器交叉检查了我的网站，不幸的是，我有跨浏览器确认的问题。

问题是，每当人们进行110％的缩放时，我的按钮导航栏就会开始变形。只有Chrome支持我的网站视图，并且只能以100％缩放或其他方式使我的导航栏分成几部分。请参阅下面的屏幕截图，了解其中的区别：

正确观点：https://postimg.org/image/aymnhz541/

断条视图：https://postimg.org/image/99zm3l7s7/

我正在使用位置绝对和相对属性到那些导航栏按钮，但我也尝试了浮动属性，似乎没有解决我的问题。我甚至通过将像素（px）更改为百分比（％）来检查边距和术语，但没有任何改变。

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

A）每当用户进行缩放时，我可以对差异进行编码，就像它们缩小一样，然后我的按钮会变小，例如减少该动作的宽度而不会破坏我的导航栏？

（如果用户缩放110％，则导航栏的大小应为110％，如果用户缩小到75％，则我的导航栏应为原始大小的75％。）

或者，如果有任何其他解决方案可以阻止我的导航栏部分损坏，请告诉我。我希望我的导航栏保持不变。

这是我的代码：

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

简短回答 - 不，你不能基于浏览器缩放的风格。但是，有些事情你可以考虑。像容器宽度与流体，定位等一样。如果你添加了一个代码而不仅仅是图像，那将会更有帮助。