Как я могу сделать мой сайт хорошо выглядеть на смартфонах?

Question

Так что я строю этот одностраничный сайт. Я сделал это с 0, и теперь я попытался проверить, как это будет выглядеть на смартфонах. Ширина сайта составляет всего 50%, а остальное - пустая страница. Я искал причины, но я понятия не имею, что случилось. Я довольно новичок в этом, это моя первая веб-страница. Я не знаю, с чего мне обратиться за помощью, поэтому я пришел сюда.

Answer 1

У вас есть 2 варианта:

1. . Вы можете использовать Bootstrap, чтобы создать адаптивный сайт: https://getbootstrap.com/docs/4.4/layout/grid/

2. Если вы не хотите использовать Bootstrap, вы можете использовать @media queries для адаптации дизайна в зависимости от размера экрана. Вы можете обратиться к https://media-queries.aliasdmc.fr/media-queries-live.php, чтобы проверить, что вы можете использовать. Например, если вы хотите применить изменения только на ландшафтном смартфоне, вам необходимо использовать следующий код на css:

@media only screen and (min-width : 321px) {
  /* Here your code */
}

Answer 2

Весь ваш дизайн статичен c. Вы должны сделать это Dynami c с видом на дисплей. Вы можете использовать bootstrap систему координат, чтобы упростить ее.