Блог

Главная - Вопросы по программированию - Адаптивный CSS: окно просмотра и 100% не подходит так много

Адаптивный CSS: окно просмотра и 100% не подходит так много

#html #css #responsive

#HTML #css — код #отзывчивый

Вопрос:

Я вставил этот тег в свой код:

 <meta name="viewport" content="width=device-width; initial-scale=1.0;">

А затем, после медиа-запроса, я спросил

 header {
    width: 100% !important;
}
main {
    width: 100% !important;
}

Но у меня есть серьезная разница, когда я захожу на сайт на своем iPhone.

Safari увеличивает масштаб текста (основного), и заголовок становится намного больше по ширине.

Если я сниму мета-тег, он слишком мал.

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

1. Какой ваш медиа-запрос вы «спрашиваете»? Это опечатка, когда ваши header и main селекторы предназначены для классов (вам нужно использовать . перед ними: .header / .main если они есть? Вы уверены, что ограничиваете body полную ширину области просмотра, или она как-то больше? Элементы header и main будут 100% их соответствующими родителями. Пожалуйста, добавьте немного больше кода, чтобы мы могли увидеть проблему, с которой вы столкнулись, на данный момент это немного неясно.

2. Кроме того, нет особой необходимости переопределять правила стиля !important , если вы загружаете свой CSS в правильном порядке. Он запускается первым сверху, последним снизу, при этом самые нижние стили переопределяют все вышеперечисленные (если !important только они не используются где-то выше).

3. Ну, извините, если я не совсем ясно, я француз. На самом деле, мне понравился веб-сайт: alsacreations предложил: сначала я вставил код css для мобильных устройств, а затем вставил обычный код в медиа-запрос: «@media screen и (минимальная ширина: 1024 пикселей)». Кроме того, в начале моего кода я установил ширину 100% для тела…

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

5. См. Также Предложение @ wscourge ниже — надеюсь, это поможет прояснить некоторые вещи 🙂

Ответ №1:

Мне очень жаль, это было что-то глупое и глупое, но я нашел причину.

На самом деле проблема была в нижнем колонтитуле: я попытался поместить верхний, основной и нижний колонтитулы в display none, чтобы их не было видно…

Я не знаю, почему я не подумал об этом раньше…

Извините и спасибо за вашу помощь.

Ответ №2:

Вы используете точку с запятой для разделения значений атрибута содержимого, где вместо этого следует использовать запятую, например:

 <meta name="viewport" content="width=device-width, initial-scale=1">

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

1. Используете ли вы какой-либо файл сброса css, на который я могу взглянуть?

2. Да, я использую этот:

3. Но у меня есть более старая версия

Ответ №3:

 header {
    width: 100vw !important;
}
main {
    width: 100vw !important;
 }

Это просто простой пример, если он работает для вас, перекодируйте его и избавьтесь от важных

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

1. Но это не работает, извините. У меня все еще есть main, равный 100%, и заголовок, равный 200%…

2. К вашему сведению: vw это «ширина окна просмотра», аналогично вы можете использовать vh для «высоты окна просмотра» — значение указано в «%» — так, например 50vw , будет «50% от ширины окна просмотра»

Метки: