#html #css #mobile #position
#HTML #css #Мобильный #расположить
Вопрос:
<div style="position:absolute; top:60px; left:600px">
<h2>Shop</h2>
</div>
Как вы размещаете divs в html и CSS с использованием процентов? Как показано выше, до сих пор, чтобы расположить divs в html, я указывал пиксели, в которых они расположены. Проблема в том, что когда я попробовал свой сайт на мобильном устройстве с меньшим количеством пикселей, мне пришлось прокручивать, чтобы увидеть все целиком. Есть ли способ использовать проценты, чтобы определить, где должен быть div, чтобы вам не нужно было прокручивать? Я могу использовать CSS. Спасибо.
Комментарии:
1. Это не прямой ответ на ваш вопрос; но, если вы в состоянии, для проекта, над которым вы работаете, возможно, загляните в Bootstrap или CSS Flexbox или CSS Grid. Эти CSS-фреймворки должны помочь вам с адаптивным HTML, который будет работать как на мобильных устройствах, так и на настольных компьютерах.
Ответ №1:
Вы можете использовать процент, и макет автоматически изменится в соответствии с размером экрана.
<div style="position:absolute; top:5%; left:26%">
<h2>Shop</h2>
</div> В приведенном выше коде магазин всегда будет отображаться 5% сверху и 26% слева в зависимости от размера устройства.
Но проблема с этим подходом в том, что вы начнете видеть много пустого пространства на более широких экранах. Лучшим подходом было бы использовать медиа-запросы для оформления страницы по-разному, чтобы то, что будет хорошо выглядеть на каждом экране, а не позволять css обрабатывать это за вас. Вы также можете использовать фреймворки, такие как bootstrap, которые позволяют вам устанавливать точку останова, при которой вы можете переключаться на другой макет для разных размеров экрана.