Блог

Итак, я работаю с html / css и пытаюсь создать условие со строкой пользовательского агента. Мы хотим иметь условие, при котором он может определить, использует ли пользователь мобильный или рабочий стол. Причиной этого стал баннер, который она добавила на наш сайт, она также создала мобильную версию баннера.

Я прочитал в Интернете, что некоторые люди используют «@media queries». Я посмотрел несколько видео, но я все еще испытываю трудности, поскольку я новичок во всем этом, как я уже говорил ранее. Баннер, который находится прямо под ним, является мобильной версией.

         <div class="entry-content">
    <div class="vc_row wpb_row vc_row-fluid vc_custom_1535742697651 vc_row-has-fill"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner vc_custom_1519293449099"><div class="wpb_wrapper"><div class="vc_empty_space"   style="height: 32px"><span class="vc_empty_space_inner"></span></div>
<div  class="wpb_single_image wpb_content_element vc_align_center">
    
    <figure class="wpb_wrapper vc_figure">
        <div class="vc_single_image-wrapper   vc_box_border_grey"><img class="lazy lazy-hidden vc_single_image-img " src="//www.pacaire.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://www.pacaire.com/wp-content/uploads/2020/06/3Copy-of-Free-Thermostat-Offer-Banner-v2-1.png" width="1700" height="150" alt="3Copy of Free Thermostat Offer Banner v2 (1)" title="3Copy of Free Thermostat Offer Banner v2 (1)" /><noscript><img class="vc_single_image-img " src="https://www.pacaire.com/wp-content/uploads/2020/06/3Copy-of-Free-Thermostat-Offer-Banner-v2-1.png" width="1700" height="150" alt="3Copy of Free Thermostat Offer Banner v2 (1)" title="3Copy of Free Thermostat Offer Banner v2 (1)" /></noscript></div>
    </figure>
</div>
  

вы можете скрыть изображение, если размер экрана меньше определенного пикселя.

 @media screen and (max-width:900px) {
.(imageclassToHide) {
   visibility: hidden;
 }
}
  

например, и наоборот для минимальной ширины и так далее и тому подобное.

Вы захотите использовать mediaqueries, как вы упомянули в своем вопросе. Сначала вы хотите создать div, который мы можем показывать и скрывать в зависимости от того, является ли он мобильным или настольным. Я назвал их «desktop» и «mobile».

 <div class="desktop"
    <div class="entry-content">
        <div class="vc_row wpb_row vc_row-fluid vc_custom_1535742697651 vc_row-has-fill"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner vc_custom_1519293449099"><div class="wpb_wrapper"><div class="vc_empty_space"   style="height: 32px"><span class="vc_empty_space_inner"></span></div>
    <div  class="wpb_single_image wpb_content_element vc_align_center">
</div> <!-- desktop closes -->
        
<div class="mobile">
        <figure class="wpb_wrapper vc_figure">
            <div class="vc_single_image-wrapper   vc_box_border_grey"><img class="lazy lazy-hidden vc_single_image-img " src="//www.pacaire.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://www.pacaire.com/wp-content/uploads/2020/06/3Copy-of-Free-Thermostat-Offer-Banner-v2-1.png" width="1700" height="150" alt="3Copy of Free Thermostat Offer Banner v2 (1)" title="3Copy of Free Thermostat Offer Banner v2 (1)" /><noscript><img class="vc_single_image-img " src="https://www.pacaire.com/wp-content/uploads/2020/06/3Copy-of-Free-Thermostat-Offer-Banner-v2-1.png" width="1700" height="150" alt="3Copy of Free Thermostat Offer Banner v2 (1)" title="3Copy of Free Thermostat Offer Banner v2 (1)" /></noscript></div>
        </figure>
    </div>
</div> <!-- mobile closes -->
                
    </body>
  

Далее мы редактируем css, чтобы скрывать и отображать классы в зависимости от размера браузера. В этом случае я решил, что 600 пикселей будет хорошим размером для мобильных устройств, но трудно получить точный размер. Не стесняйтесь настраивать его так, как вы хотите. Этот код по умолчанию будет скрывать мобильный и показывать рабочий стол, когда он достигнет медиа-запроса, он применит мобильные стили, если размер экрана меньше 600 пикселей.

 .mobile {
  display:none;
}

@media screen and (max-width: 600px) {
   .mobile {
     display:block;
    }
  .desktop {
    display:none;
   }
 }
  

Вот простой пример jsfiddle, который я сделал. Вы можете видеть, как он показывает и скрывает контент в зависимости от размера экрана. https://jsfiddle.net/27xuc6d4/1 /