Можно ли стилизовать CSS в зависимости от масштаба пользователя? ⇐ CSS

[Anonymous]

Недавно я начал кодировать свой сайт с использованием HTML и CSS, и сегодня я получил от друга информацию о том, что мой сайт выглядит не очень хорошо в другом браузере, затем я перепроверил свой сайт с другими браузерами и, к сожалению, у меня возникла проблема. проблемы с кросс-браузерными подтверждениями.
Проблема в том, что всякий раз, когда люди увеличивают масштаб примерно на 110 %, моя панель навигации по кнопкам начинает разваливаться на части. Только Chrome поддерживает просмотр моего сайта, и только при масштабировании 100%, иначе моя панель навигации также разобьется на части. Посмотрите на скриншоты ниже, чтобы увидеть разницу:
Правильный вид: https://postimg.org/image/aymnhz541/
Вид с ломаной полосой: https://postimg.org/image/99zm3l7s7/
Я использую свойства абсолютного и относительного положения для этих кнопок панели навигации, но я также пробовал свойства float, которые, похоже, не решают мою проблему. Я даже проверил, изменив поля и термины с пикселей (пикселей) на проценты (%), но ничего не изменилось.
Итак, мой точный вопрос: есть ли какое-либо свойство CSS, строка или код, которые мог бы действовать следующим образом:
А) всякий раз, когда пользователи масштабируют изображение, я мог бы закодировать разницу, если они уменьшают масштаб, тогда мои кнопки становятся маленькими с помощью таких кодов, как уменьшение ширины этого действия, не нарушая мою навигационную панель.< /p>
(Если пользователь увеличивает масштаб на 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;
}

Код: Выделить всё

[url=link]home[/url]

 HowTo Guides

[url=link]link name[/url]
[url=link]name[/url]
[url=link]See More >>[/url]

HowTo Fixes

[url=link]link name[/url]
[url=link]name[/url]
[url=link]See More >>[/url]

Virus And Hijackers&nbsp

[url=link]link name[/url]
[url=link]name[/url]
[url=link]See More >>[/url]

&nbsp5xx Server Error Solutions&nbsp

[url=link]link name[/url]
[url=link]name[/url]
[url=link]See More >>[/url]
 [url=link] name[/url]

Подробнее здесь: https://stackoverflow.com/questions/378 ... users-zoom