Изменение макета веб-сайта при уменьшении размера браузера

#html #css

#HTML #css

Вопрос:

Когда я уменьшаю размер окна браузера, верхний и нижний нижние колонтитулы начинают уменьшаться, выталкивая содержимое, находящееся внутри нижних колонтитулов (панель навигации сверху и снизу), из нижнего колонтитула, и оно начинает перекрываться с основным текстом. Кто-нибудь знает, почему возникает эта проблема? Прошу прощения, если этот вопрос неясен или на него уже дан ответ, я все еще учусь. Большое спасибо за вашу помощь.

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

1. Вам нужно показать некоторый код и, при необходимости, также предоставить ссылку на ваш сайт.

2. Пожалуйста, покажите нам вашу разметку и CSS

Ответ №1:

Большая часть содержимого на веб-странице будет изменена таким образом, когда окно станет меньше. Что вы можете сделать, так это установить свойство min-width CSS для определения минимальной ширины, после чего браузер добавит полосы прокрутки, а не изменит размер элементов на странице. ИТАК, что-то вроде:

 .someClass {
  min-width: 800px:
}
  

Ответ №2:

Я думаю, вы можете настроить все свои правила CSS, используя% , Поэтому в случае, если ширина родительского элемента уменьшается на 400 пикселей, например, вы можете установить ширину дочернего элемента, высоту, границу и т. Д. На% значения, подобные этому :

 .parent{
  width:100%;
}
.child{
  width:60%;
}
  

Давайте предположим, что родительский 100% представляет 1024 пикселя, поэтому дочерний размер займет 614 пикселей
, а когда страница изменит размер и займет 600 пикселей, дочерний размер автоматически составит 360 пикселей