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

问题描述 投票：0回答：2

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

问题是，每当人们缩放到 110% 时，我的按钮导航栏就会开始破碎。只有 Chrome 支持我的网站视图，并且仅支持 100% 缩放，否则它也会使我的导航栏破碎。请参阅下面的屏幕截图以查看差异：

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

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

我正在对这些导航栏按钮使用位置绝对和相对属性，但我也尝试了浮动属性，但这似乎无法解决我的问题。我什至通过将边距和术语从像素 (px) 更改为百分比 (%) 进行了检查，但没有任何变化。

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

A）每当用户缩放时，如果他们缩小，我就可以编写差异，然后我的按钮会变小，并使用诸如减小该操作的宽度之类的代码，而不会破坏我的导航栏。

（如果用户确实缩放了 110%，那么导航栏应该是 110% 大小，如果用户确实缩小到 75%，那么我的导航栏应该是原始大小的 75%。）

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

这是我的代码：

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

html css navigation navbar nav
2个回答
1
投票

简短的回答 - 不，你不能根据浏览器缩放来设置样式。但是，有些事情您可以考虑。例如容器宽度与流体、定位等。如果您添加一些代码而不仅仅是图像，将会更有帮助。

0
投票

如果你想知道用户的缩放状态，你必须检查window.devicePixelRatio（JS）。 例如，125% 的缩放将是像素比或 1.25

@media screen and (max-width: 1920px) and (-webkit-device-pixel-ratio: 1.25) {
  //your styles here
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.