Ответ 1

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

Запросы CSS Media:

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

/*Write your css here*/

}

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

}

Отъезд: CSS-Tricks + размеры устройства и Медиа-запросы

Ответ 2

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

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

}

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

Ответ 3

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

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

#navbar {min-width:300px;}

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

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

body {min-width:300px;}

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

id {height: 250px; width: 500px}

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

Ответ 7

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

Ответ 8

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

<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>

Ответ 9

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