Как предотвратить искажение макета CSS при увеличении/уменьшении масштаба?

Я создал очень простой сайт с блоком #container, который включает в себя #navbar и #content. Однако, когда я увеличиваю или уменьшаю масштаб, #navbar искажается, если я увеличиваю масштаб, ссылки помещаются друг под друга вместо того, чтобы быть встроенными. Если я уменьшу масштаб, между ссылками будет добавлено слишком много отступов. Как я могу остановить это?

HTML:

<div id="navbar">
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="top.html">Top</a></li>
    <li><strong><a href="free.html">FREE</a></strong></li>
    <li><a href="photo.html">Photo</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact Us</a></li>
</ul>
</div>

<div id="content">

<p>Some sample text.<p>

</div>


</div>

CSS:

#container {

    position: static;
    background-color: #00bbee;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 7%;
    margin-bottom: 15%;
    border: 2px solid red;


}

#navbar  ul{

    list-style: none;



}

#navbar  li{

    display: inline;

}

#navbar li a{

    text-decoration: none;
    color: #11ff11;
    margin: 3%;
    border: 1px dotted orange;
    padding-left: 4px;

}

#navbar li a:hover {

    background-color: white;
    color: green;

}

#navbar {

    background-color: #eeeeee;
    padding-top: 2px;
    padding-bottom: 5px;
    border: 1px solid yellow;

}

Как я могу остановить его от искажения?

Кроме того, я все еще новичок в CSS, меня учили использовать % вместо px. Это правильно? Также все, что вы должны указать, пожалуйста, дайте мне знать.

Заранее спасибо!


css zooming distortion
person Pztar    schedule 14.03.2012    source источник
comment
Какой браузер вы используете для тестирования? Обычно они обрабатывают масштабирование по-разному. Я думаю, что проценты также будут отбрасывать вещи.   -  person zim2411    schedule 14.03.2012
comment
Я бы не беспокоился об этом. Некоторые браузеры имеют «масштабирование текста», а не масштабирование всей страницы. Вероятно, лучше сосредоточить усилия на том, чтобы макет не искажался при изменении размера текста ... а не на реализации масштабирования браузера, он будет меняться, и вы не можете его контролировать.   -  person dave    schedule 15.03.2012
comment
Я использую фаерфокс. Должен быть способ предотвратить его искажение, я знаю, что когда я пытался сделать макет css раньше, разные разделы страницы искажались и шли друг под другом.   -  person Pztar    schedule 15.03.2012
comment
Пзтар, вы когда-нибудь давали ответ, который вы считали удовлетворительным?   -  person Andy Mercer    schedule 19.05.2014
comment
@Pztar Что касается процентов, есть время и место. Это также относится к px, em, rem, pt, pc и т. д. и т. д. Чтобы макет выглядел одинаково, вы, вероятно, захотите, чтобы связанные элементы использовали px.   -  person MDEV    schedule 10.08.2014

Ответы (9)


arrow_upward
7
arrow_downward

Поскольку этот вопрос по-прежнему получает постоянные просмотры, я опубликую решение, которое использую в настоящее время.

Медиа-запросы CSS:

@media screen and (max-width: 320px) { 

/*Write your css here*/

}

@media screen and (max-width: 800px) { 

}

Ознакомьтесь с: CSS-Tricks + размеры устройств и Запросы мультимедиа

person Pztar    schedule 14.05.2015

arrow_upward
5
arrow_downward

У меня была аналогичная проблема, которую я исправил, добавив дополнительный div вокруг моего меню навигации. Затем я добавил следующее

#menu-container {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;

}

Это предотвратило его заворачивание. Надеюсь, что это работает.

person London804    schedule 15.03.2013
comment
скрывать вещи - не решение - person Muhammad Bilal; 22.03.2018

arrow_upward
1
arrow_downward

Чтобы решить проблему с увеличением, попробуйте добавить атрибут min-width к внешнему счетчику (#container или #navbar?). Параметр min-width предотвращает попытки сжать веб-страницу сверх указанной ширины (т. е. 300 пикселей). Если вы увеличите масштаб слишком сильно, вместо того, чтобы элементы внутри <div> перескакивали вниз на следующую строку, ваша панель навигации перестанет уменьшаться, а внизу страницы появится полоса прокрутки.

Пример (в вашей таблице стилей):

#navbar {min-width:300px;}

Еще один хороший способ добиться этого — применить атрибут min-width к телу страницы.

Пример (в вашей таблице стилей):

body {min-width:300px;}

Наконец, если вы хотите, чтобы панель навигации занимала всю ширину страницы, используйте {clear:both;} в таблице стилей.

person helper    schedule 27.06.2013
comment
Не используйте { ясно: оба; } если вы не используете поплавки... и, согласно вашему примеру, опубликованному в вопросе, вы НЕ используете поплавки. - person PerryCS; 05.12.2017

arrow_upward
0
arrow_downward

Хм .... вы уже пробовали добавлять свойства min-width/min-height? Вы можете просто включить эти свойства в свой div #container. Это может просто помочь.

person Lobabob    schedule 21.03.2012

arrow_upward
0
arrow_downward

В разных браузерах используются разные методы масштабирования. Все они имеют недостатки. Использование процентов приведет к ошибкам округления. Нет простых ответов.

См.: http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html

person Diodeus - James MacFarlane    schedule 14.03.2012

arrow_upward
0
arrow_downward

Я бы просто установил абсолютную высоту и ширину для всех элементов/разделов на странице.

идентификатор {высота: 250 пикселей; ширина: 500 пикселей}

Или вы также можете использовать min/max-width/hight для настройки макета страницы на разных размерах экрана или при изменении размера окна браузера.

person Dominik Schmidt    schedule 10.05.2014

arrow_upward
0
arrow_downward

Это в основном потому, что вы установили свойства ширины или поля в процентах. Если вы это сделаете, убедитесь, что вы предоставили максимальную ширину такому элементу.

person RedDevils    schedule 07.10.2014
comment
Пожалуйста, уточните свой ответ - person Adrian Forsius; 07.10.2014

arrow_upward
0
arrow_downward

Вот, пожалуйста, это очень похоже на приведенные выше предложения, но у него есть область содержимого фиксированной ширины, если вы искали полную ширину, извините (;_;)

<style>
body {
    margin:0px;
}
#container {
    width:990px;
    background-color: #00bbee;
    margin:0 auto;
    border: 2px solid red;
}
#navbar ul {
    list-style: none;
}
#navbar li {
    display: inline;
}
#navbar li a {
    text-decoration: none;
    color: #11ff11;
    margin: 3%;
    border: 1px dotted orange;
    padding-left: 4px;
}
#navbar li a:hover {
    background-color: white;
    color: green;
}
#navbar {
    background-color: #eeeeee;
    padding-top: 2px;
    padding-bottom: 5px;
    border: 1px solid yellow;
}
</style>

<div id="container">
  <div id="navbar">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="top.html">Top</a></li>
      <li><strong><a href="free.html">FREE</a></strong></li>
      <li><a href="photo.html">Photo</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact Us</a></li>
    </ul>
  </div>
  <div id="content">
    <p>Some sample text.
    <p> 
  </div>
</div>
person Gordon Mcleod    schedule 10.10.2014

arrow_upward
0
arrow_downward

Вы захотите использовать медиа-запрос css, чтобы установить точки останова для разных стилей в вашем css. Что при правильном использовании устранит любые проблемы с искажениями.

person jimmybisenius    schedule 18.02.2015