2016-10-14 4 views
-1

Могу ли я использовать позицию: Относительно для Div, если я хочу полностью создать отзывчивый сайт. У меня есть менталитет, думающий, что это создаст проблемы, и это не лучшая практика.Могу ли я использовать относительное положение для div, когда я использую методы адаптивного проектирования?

+0

Отзывчивый дизайн не принимает конкретных решений; это просто означает, что веб-сайт рабочего стола будет перестроен, чтобы соответствовать и хорошо выглядеть на мобильном или другом экране устройства, а не иметь совершенно другой интерфейс. [Эта статья W3] (http://www.w3schools.com/html/html_responsive.asp) объясняет это довольно хорошо. – vladdobra

ответ

1

Возможно, вы всегда можете использовать медиа-запрос для добавления/удаления свойства position, если это необходимо.

@media (min-width: 768px) { .mySelector { position: relative } }

Приведенный выше код добавляет его только тогда, когда браузер шире, чем 767px

0

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>

+0

HI спасибо, не могли бы вы привести пример для поля: 0 автообновление? – silvachathura

1

Да, в ответе Мэтью вы можете использовать любое свойство позиции на чувствительном сайте. Это больше знает, что они делают в контексте дизайна.

Вот хорошая ссылка, объясняющая различные аспекты свойства position.

https://www.youtube.com/watch?v=-vo0HzNHL3U