Показать изображение на планшете и другое изображение на ПК

Question

У меня есть эта проблема ... Я бегу страницу http://exploreprague.cz. В правом верхнем углу у меня есть лента. Но когда я смотрю на нее на планшете, это перекрывает мое меню. Поэтому я подумал, что если есть способ показать другую картинку (разная лента, а не только по-разному, она может работать. Но я не знаю, есть ли какой-то трюк HTML/CSS/JS, который может это сделать. Спасибо

Answer 1

Одним из лучших способов добиться того, что вы хотите, было бы использовать CSS3 Media queries.

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

Например (IPad портрет/разрешение пейзаж):

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
    #oldImg { display:none; } 
    #newImg { display:block; } 
} 

Answer 2

Вот пример того, как использовать адаптивный CSS:

 Large desktop 
     @media (min-width: 1200px) { 
      #largeImage{ 
       display: inline; 
      } 
      #smallImage{ 
       display: none; 
      } 
     } 

     Portrait tablet to landscape and desktop 
     @media (min-width: 768px) and (max-width: 979px) { 
      #largeImage{ 
       display: none; 
      } 
      #smallImage{ 
       display: inline; 
      } 
     } 

     Landscape phone to portrait tablet 
     @media (max-width: 767px) { 
      /* do the same as tablets or include this width range in the tablet style*/ 
     } 

     Landscape phones and down 
     @media (max-width: 480px) { 
      /* do the same as tablets or include this width range in the tablet style*/} 

Просто установите свойство отображения изображения в соответствии с ширину экрана. использовать 2 изображения один с

display: none; 

и другие с:

display: inline; 

и переключаться между ними на узком экране