Удаление HTML-элемента на мобильный вид?

Question

Я не использую jquery mobile.

Я построил шаблон в WordPress и иметь полный фон ширины, который может быть установлен на другой по одному для каждой страницы: Background_1.jpg = Home, Background_1.jpg = О, ENS ....

Это то, что загружается в передней части:

<div id="bg"> 
    <img id="background" src="images/Background_1.jpg" alt="background"> 
</div> 

Итак, моя проблема заключается в следующем:

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

Я также не хочу скрыть его, я хочу удалить html, когда размер окна меньше 600 пикселей.

Кто-нибудь сделал это раньше?

Answer 1

Используйте медиа-запрос в своем css. Что-то вроде этого:

@media (max-width: 767px) { 
    .styleName { 
     display:none; 
    } 
} 

Это скрывает элемент CSS, если размер окна меньше 767px. Вам нужен правильный код в ваш HTML:

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

Чтобы скрыть DIV на мобильный режим просмотра, вам нужно правильный размер окна. Речь идет о прямо из рамок начальной загрузки:

/* Landscape phones and down */ 
@media (max-width: 480px) { ... } 

Чтобы реализовать это в код, вы должны использовать:

<div id="bg" class="styleName"> 
CODE 
</div> 

Читайте больше здесь: Mobile Device Trick