Мой сайт портится, когда я меняю размер экрана - PullRequest
Новая
       5

Мой сайт портится, когда я меняю размер экрана

0 голосов
/ 24 сентября 2018

Я хочу, чтобы мой сайт реагировал только с помощью css. Я новичок в разработке, пожалуйста, помогите мне, как я могу сделать его адаптивным только с CSS ?.

Я пытался использовать медиа-запрос, но он не работал для меня, или, может быть, я не знаю, как его использовать.

Я копирую этот сайт: https://www.portfoliobox.net/

Я знаю, что вышеупомянутый сайт сделан с использованием начальной загрузки, но я делаю это только с html и css.

Проверьте мой, он портится при изменении размера экрана.https://portfolioboxcopy.000webhostapp.com/

И скажите мне, если я делаю какие-либо ошибки.Спасибо!

1 Ответ

0 голосов
/ 25 сентября 2018

Несколько советов о том, как можно улучшить свой сайт и сделать его адаптивным:

  1. Избегайте встроенных стилей, поскольку ими сложно управлять.Поместите ваши стили в таблицу стилей .css и создайте ссылку на таблицу стилей в теге ссылки где-нибудь перед закрывающим тегом </head> в вашем HTML-документе, например: <link rel="stylesheet" href="styles.css" />

  2. Для адаптивности вашего сайта вы должны использовать процентную ширину как можно чаще и медиазапросы, чтобы адаптировать свой дизайн.Медиа-запросы должны быть добавлены в виде отдельных правил стиля, например: 

.bg1 {
  margin: -10px -8px 0;
}

@media (max-width: 500px) {
  .bg1 {
    margin: 0;
  }
}

Избегайте пробелов в именах файлов, например, с вашим изображением "bg (1) .jpg", так как пробелы в URL файла не допускаются.Вместо этого попробуйте что-то вроде «bg_1.jpg».

Рассмотрите возможность перемещения текущего элемента header в новый элемент-оболочку.Это облегчит создание области заголовка с заданной высотой, которая может быть изменена с помощью медиа-запросов.Я рекомендую удалить элемент "bg1" и использовать изображение в background-image: url(); для нового элемента-оболочки, описанного выше.

...