Могу ли я использовать позицию: Относительно для Div, если я хочу полностью создать отзывчивый сайт. У меня есть менталитет, думающий, что это создаст проблемы, и это не лучшая практика.Могу ли я использовать относительное положение для div, когда я использую методы адаптивного проектирования?
ответ
Возможно, вы всегда можете использовать медиа-запрос для добавления/удаления свойства position
, если это необходимо.
@media (min-width: 768px) { .mySelector { position: relative } }
Приведенный выше код добавляет его только тогда, когда браузер шире, чем 767px
position: relative
не означает автоматически, что элемент перемещается (который может быть проблематичным при использовании в предельно различных размеров окна просмотра и с фиксированными значениями):
Если вы не используете настройки left
, right
, top
или bottom
, ничего не перемещается из нормального потока, но затем position: relative
все еще может быть полезным. Если вы используете относительные значения для left
, right
, top
или bottom
(а также для width
), они будут полностью реагировать.
ДОБАВКА ПОСЛЕ Комментарий:
я добавил пример. На самом деле я ошибся раньше, когда вы используете margin: 0 auto
для горизонтального центрирования, position: relative
не нужен. Но я все еще использовал его (дважды) в примере, и я использовал процентное значение для top
во внутреннем DIV, тем самым центрируя его по вертикали в другом DIV (20% верхняя и 60% высота оставляют еще 20% внизу). Изменение размера - вы увидите не только изменение абсолютных размеров DIV, но и этого top
параметра, который не будет иметь никакого влияния на значения по умолчанию position: static
html, body {
height: 100%;
}
.x {
margin: 0 auto;
width: 80%;
height: 50%;
background: #fa0;
}
.y {
position: relative;
top: 20%;
margin: 0 auto;
width: 50%;
height: 60%;
text-align: center;
background: #a0f;
}
<div class="x">
<div class="y">
some text
</div>
</div>
HI спасибо, не могли бы вы привести пример для поля: 0 автообновление? – silvachathura
Да, в ответе Мэтью вы можете использовать любое свойство позиции на чувствительном сайте. Это больше знает, что они делают в контексте дизайна.
Вот хорошая ссылка, объясняющая различные аспекты свойства position.
Отзывчивый дизайн не принимает конкретных решений; это просто означает, что веб-сайт рабочего стола будет перестроен, чтобы соответствовать и хорошо выглядеть на мобильном или другом экране устройства, а не иметь совершенно другой интерфейс. [Эта статья W3] (http://www.w3schools.com/html/html_responsive.asp) объясняет это довольно хорошо. – vladdobra