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