Мобильный медиа-запрос переопределяется настольными значениями? - PullRequest
Новая
       51

Мобильный медиа-запрос переопределяется настольными значениями?

0 голосов
/ 06 декабря 2018

Итак, у меня есть страница с длинным списком классов, и под каждым заголовком есть значок (изображение), указывающий, какой это класс.На рабочем столе у ​​меня установлено отображение центра под заголовком.На мобильном телефоне я хочу сделать то же самое.Однако, когда я выравниваю его по центру на мобильном телефоне, используя margin-left: auto и margin-right: auto, он остается в стороне.Если я переместу его, используя margin-left: 40px, он будет перемещаться, но на рабочем столе он также переместится.Если я перейду к запросу медиа-десктопа и оставлю поле слева: 0, оно изменит маржу на 0 как для настольного компьютера, так и для мобильного телефона.

Вот код: 

.classicons1 {
    margin-left: 45%;
    padding: 5px;
    width: 10%;
    display: inline;
}
@media screen and (min-width: 880px) {
.classicons1 {
    width: 7%;
    padding: 5px;
    display: inline;
    margin-left: 0;
}
}

Любые другиеэлемент в медиа-запросах работает, кроме этого и любых новых элементов, которые я создаю.Когда я открываю его в режиме проверки в Chrome, я вижу, что мобильные элементы вычеркнуты, переопределяясь элементами рабочего стола.

1 Ответ

0 голосов
/ 06 декабря 2018

Что я могу найти неправильно в вашем CSS, так это:

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

    @media (max-width: 768px) {/*css code here*/}

  2. Наилучший способ, которым я нашел, чтобы центрировать вещи по ширине их родителей, это:

    margin: 0 auto; display: table/block;

  3. Наконец, если вы хотите проверить, переопределяются ли ваши элементы в любом отношении, есть два способа избежать этого.Либо поместите свой CSS в строку HTML, используя атрибут style ИЛИ используйте следующий код:

    property: property-value !important !important отдает ему приоритет, хотя старайтесь не использовать его в качестве решения и используйте только !importantв качестве метода отладки.Это следует рассматривать как последнее средство.

* Примечание. Если вы видите, что код вычеркнут в chrome с помощью inspect-element (консоль отладки), вы, скорее всего, переопределяете свой CSS, используя другиеатрибуты, будь то встроенный HTML-CSS или другие классы, которые могут влиять на класс, который вы пытаетесь редактировать.Помните об этом при отладке кода.

...