Убрать объект, когда на мобильном телефоне

Question

для моего сайта У меня есть этот экран входа в систему с нижним колонтитулом внизу. Страница оптимизирована для настольного монитора, а сам сайт уже оптимизирован как для ПК, так и для мобильных устройств, поэтому я не хочу беспокоиться о создании новой мобильной версии.

Я не очень хорошо разбираюсь в сценариях, поэтому я спрашиваю его здесь: Можно ли создать скрипт, который удаляет нижний колонтитул, когда размер экрана меньше 400 пикселей?

Вот некоторые фотографии проблемы и, может быть, вы, ребята, можете дать мне решение? Спасибо заранее!

Answer 1

Использование CSS @media:

/* From 0 to 992px Device Width */ 
@media (max-width: 992px) { 

    #footer { 
     display: none; 
     // Other styles here 
    } 

} 

Answer 2

Если вы используете Bootstrap:

Дополнительные маленькие устройства Телефоны (< 768px) (имена классов:. visible-xs-block, hidden-xs)

Малые устройства таблетки (≥768px) (имена классов: .Visible-см-блок, скрытых SM)

Средние устройства Desktops (≥992px) (имена классов: .Visible-MD- блок, скрытый мкр)

Больших устройств Desktops (≥1200px) (имен классов: .Visible-LG-блок, скрытые Lg)

Для получения дополнительной информации: http://getbootstrap.com/css/#responsive-utilities

Если вам не нужно будет добавлять запросы @media для нижнего колонтитула, если ваш нижний класс - это .footer. Его медиа-запросы будут следующие:

@media screen and (max-width: 480px) { 
 
    .footer { 
 
     display: none; 
 
    } 
 
}