Блог

Главная - Вопросы по программированию - Элементы на HTML-странице меняют положение при изменении разрешения

Элементы на HTML-странице меняют положение при изменении разрешения

#html #css

Вопрос:

Я новичок в области HTML и CSS. Я создал свой первый веб-сайт один день назад, и мне было интересно, не могли бы вы помочь мне предотвратить изменение положения элементов моей страницы при изменении разрешения. Я отправил это коллеге, и у него разрешение ниже, чем у меня, и на его экране ему нужно уменьшить масштаб, чтобы увидеть его так же, как я.

Я, конечно, исследовал и обнаружил, что когда я помещаю эту мету с именем «viewport», она будет адаптироваться к разрешению на разных устройствах (даже телефонах), но, однако, ничего не изменилось.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Комментарии:

1. Вы ищете ключевое слово для адаптивного макета / дизайна .

2. @pavel Да, я исследовал адаптивный макет и то, что сказано, что мне нужно использовать » <meta name="viewport" content="width=device-width, initial-scale=1.0"> «, чтобы мой макет был адаптивным. Я хочу, чтобы мой сайт был совместим со всеми разрешениями. Фиксируя положение всех элементов.

3. Начните читать о медиа-запросах. Вы можете установить разрешение вашего устройства и какой элемент, что и как изменить. Позже вы можете начать больше изучать bootstrap / flexbox для лучшего отображения ваших элементов. Примечание: попробуйте использовать проценты в атрибутах высоты / ширины. Это очень помогает.

Ответ №1:

Это то, что в основном выполняют запросы @media в css. Попробуйте поиграть с шириной страницы, и вы увидите изменения. Итак, по сути, цвет заголовка по умолчанию — малиновый (своего рода красноватый), но когда ширина экрана равна 800 или меньше 800, тогда его цвет будет зеленым.

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

Для более адаптивных страниц подробнее о Bootstrap читайте здесь, а о Flexbox — здесь .

         #header1{
            color:crimson;
        }
        @media only screen and (max-width: 800px) {
            #header1{
                color:greenyellow;
            }
        } 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <h1 id="header1">Lorem ipsum dolor sit amet.</h1>
Метки: