как я должен сделать свой проект адаптивным к css?

#css #responsive-design

#css #адаптивный дизайн

Вопрос:

я попытался изменить размер экрана в теге @media, но содержимое на моей странице по-прежнему не реагирует вообще. Что я могу сделать, чтобы сделать его адаптивным, кроме начальной загрузки? Приведенный ниже код — это мой css-код, который я добавил в свой проект. Заранее благодарю вас.

 @media screen and (max-width: 600px)  {
body{
position: absolute;
width: 411px;
height: 823px;
left: 0px;
top: 0px;

background: #00644C;

font-family:Inter;
}

}



.container {
  width: 309px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}


label {
color: #FFFFFF; 
  display: flex !important; 
  padding-left: 70px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: normal !important;
  

 
}
.btn.btn-block{

background: #FFFFFF;
border-radius: 2px;
}

input[type=submit] {
    width: 20em !important;
    height: 2em;
}
  

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

1. Пожалуйста, поделитесь более подробной информацией, чего вы хотите достичь? Потому что в коде вы добавляете абсолютную позицию в тег body и фиксируете ширину. Вы можете удалить носитель и удалить ширину исправления, заменив его на несколько процентов. Если вы хотите применить этот стиль ниже 600 пикселей, чем вы можете использовать media. И не используйте абсолют. Спасибо

Ответ №1:

Попробуйте добавить этот код в свой head раздел вашего html. Это дает браузеру инструкции о том, как управлять размерами и масштабированием страницы.

width=device-width Часть устанавливает ширину страницы в соответствии с шириной экрана устройства (которая будет варьироваться в зависимости от устройства).

initial-scale=1.0 Часть устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

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