Использование JavaScript для изменения HTML при изменении размера браузера?

Question

Я создаю сайт и хочу, чтобы одна часть моего HTML работала, когда ширина браузера больше 768 пикселей, а другая часть моего HTML запускается только тогда, когда ширина браузера меньше или равна 768 пикселей , Я прочитал старый вопрос StackOverflow об этом here, но не знаю, как выполнить JavaScript, предложенный CodinCat, поскольку у меня нет опыта с ним. (Более конкретно, могу ли я просто непосредственно вставить HTML между фигурными скобками? Что именно я помещаю там, где говорится «ваши медиа-запросы» - 768px, @media ... и т. Д.

Например:
HTML, когда больше, чем 768px:

<img src="images/1.png" alt=""/> 
<p>Some text</p> 

HTML, когда меньше/равна 768px:

<p>Some text</p> 
<img src="images/2.png" alt=""/> 

Answer 1

<style> 

@media (max-width: 768px) { 
    .show-large { 
    display: none; 
    } 
} 

@media (min-width: 769px) { 
    .show-small { 
    display: none; 
    } 
} 

</style> 


<div class="show-large"> 
    <img src="images/1.png" alt=""/> 
    <p>Some text</p> 
</div> 

<div class="show-small"> 
    <p>Some text</p> 
    <img src="images/2.png" alt=""/> 
</div> 

Вы должны проверить загрузчик для этого. также: http://getbootstrap.com/css/#responsive-utilities Bootstrap имеет гр которые автоматически отображают/скрывают содержимое в зависимости от размера экрана. Они также имеют классы, которые могут переупорядочить ваш контент (например, абзац и изображение) на основе размера экрана.

Answer 2

Это может быть сделано без JavaScript с использованием средств массовой информации запросов:

@media all and (min-width: 768px) { 
 
    .hide-wide { 
 
    display: none; 
 
    } 
 
} 
 

 
@media all and (max-width: 767px) { 
 
    .hide-narrow { 
 
    display: none; 
 
    } 
 
}

<img class="hide-wide" src="https://placehold.it/300x300/95ECD6/000/?text=<%20768px" alt=""/> 
 
    
 
<p>Some text</p> 
 
    
 
<img class="hide-narrow" src="https://placehold.it/300x300/DAC6FF/000?text=>=%20768px" alt=""/>

Вот демо JSBin, а также: http://jsbin.com/dekape/edit?html,css,output

Однако, следует отметить, что браузер будет Загрузите обои, даже если они скрыты. Чтобы этого избежать, вы можете использовать фоновые изображения или, еще лучше, отзывчивые изображения, используя srcset или <picture>. Вот отличный учебник для начинающих на тех http://blog.cloudfour.com/responsive-images-101-definitions/

Наконец, если вы действительно хотели запустить JavaScript на основе ширины окна просмотра, моя любимая библиотека помогает с этим http://wicky.nillia.ms/enquire.js/

Answer 3

@Jeff ответы, безусловно, поможет, но, если это будет повторяющейся проблемой в вашей разработке и предполагая, что у вас будут подобные ситуации с другими размерами окон, я предлагаю вам потратить время на использование чего-то вроде бутстрапа. http://getbootstrap.com/ и ознакомьтесь с такими условиями, как Media Query и Responsive Design.

Answer 4

В то время как ответ Джеффа будет выполнен, вы будете делать свои пользователи и ваши серверы плохими, заставляя пользователей загружать оба изображения - display: none просто скрывает его, это не мешает его скачивать.

Кроме того, для обеспечения доступности (для чтения с экрана) и для SEO является непротиворечивым, чтобы иметь дублированный контент, т. Е. Тот же текст дважды. Если вам это нужно только один раз, он должен присутствовать только один раз в разметке. Считыватели экрана будут читать один и тот же текст вслух дважды, в то время как поисковые системы поймут, что у вас есть текст на вашей странице дважды.

Идеальное обходное решение как для проблемы с дублирующимся содержимым, так и из-за ненужной проблемы при загрузке, при одновременном показе 2 разных изображений на основе размера экрана будет использовать фоновые изображения вместо элементов изображения.

Ваш HTML не будет дублироваться:

<div class="box"> 
    <p> 
    This is my text 
    </p> 
</div> 

И следующий CSS, не заставит пользователей, чтобы загрузить оба изображения:

.box { 
    height: 280px; 
} 

/* big screen */ 
@media (min-width: 769px) { 
    .box { 
    background: url('http://fakeimg.pl/350x200/00CED1/FFF/?text=big+screen+img') 0 0 no-repeat dodgerblue; 
    } 
} 

/* small screen */ 
@media (max-width: 768px) { 
    .box { 
    background: url('http://fakeimg.pl/350x200/FF3399/FFF/?text=small+screen+img') 0 0 no-repeat magenta; 
    } 
} 

See an example CodePen here.