Я объявил класс с именем #inner в CSS для применения к определенному div, у которого есть свойство, width: 50%;
но я хотел бы, чтобы свойство ширины было равно 100% при просмотре его на мобильном устройстве.width: 100%;
Я думал сделать это следующим образом, но я попробовал это на своем смартфоне, и это не сработало:
#inner {
width: 50%;
margin: 0 auto;
padding: 0 20px;
background: #ffffff;
border-radius: 10px;
padding: 40px;
}
@media screen and (max-width: 480px){
#inner{
width: 100%;
}
}
Как я мог заставить его работать?
Убедитесь, что он у вас
HTML
естьmeta-viewport
, и подсказка при изменении ширины на 100%, с отступом, который вы даете div, он будет генерировать горизонтальную прокрутку, поэтому соcalc
100% страницы вы вычтете80px
то, что будет суммой40px
на с каждой стороны той, вdiv
которую вы попалиpadding
.То, что вы сделали, не является ошибкой, но возможно, что разрешение вашего смартфона выше, чем то, которое вы указали в медиа-запросе, поэтому файл
width: 100%
. Лучший вариант — сначала сделать то, что известно как мобильное приложение . Это означает, что сначала создается модель для мобильного устройства , затем добавляется медиа-запрос для планшета и, наконец, для рабочего стола .Еще одна вещь, которую вы должны знать, это то, что классы являются атрибутами
class
и вызываются из css с помощью «точки», например,.inner {}
и идентификатора с хэштегом.