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