• ГЛАВНАЯГЛАВНАЯГЛАВНАЯ
  • Создание сайтовСоздание сайтовСоздание сайтов
  • Разработка сайтовРазработка сайтовРазработка сайтов
  • Продвижение сайтовПродвижение сайтовПродвижение сайтов
  • SEOSEOSEO
  • Настройка рекламыНастройка рекламыНастройка рекламы
  • ИнстаграмИнстаграмИнстаграм
  • УрокиУрокиУроки
  • Форум<br /><br />Форум<br /><br />Форум<br /><br />
  • Юмор программистовЮмор программистовЮмор программистов

Урок 8. Как заменить контент для смартфонов

Иногда необходимо сделать так, чтобы картинка на сайте отображалась одна, а на устройствах, например, на смартфонах отображалась другая либо на сайте отображалось фото большего размера, чем на смартфонах. Как это сделать? На самом деле ничего сложного. Картинке задаем определенный класс, например, .foto1 и на этой же странице под ней размещаем вторую картинку с классом, например, foto2. Теперь переходим в CSS и задаем отображение foto1 свойством {display:block;} что означает «показываем», а для foto2 задаем в CSS свойство {display:none;} что означает «не показываем». Теперь прописываем для устройств (смартфонов) следующий код в CSS: @media only screen and (min-device-width : 320px) and (max-device-width : 480px){}. Между фигурными скобками прописываем для устройств CSS свойство для foto2 {display:block;}, а для foto1 {display:none;}. В итоге, при заходе на сайт с компьютера одно фото под номером 2 будет закрываться от пользователя, а другое фото под номером 1 будет показываться пользователю, в смартфонах тоже самое только наоборот. Этим же способом можно скрыть от пользователя целые блоки div. Бывает полезно, когда контента на странице много и на экранах смартфона имеет смысл скрыть какой-то маловажный, оставив, наиболее значимый. На одном сайте у меня в шапке сайта (header) крутился скрипт тегов, так называемое облако тегов, но на телефоне он выглядел не очень, занимал весь экран и последующий за ним контент более важный был ниже. Можно было заменить скрипт в мобильных устройствах на что-либо попроще, например, на фото тегов, но я не стал возиться и просто закрыл блок div от пользователя мобильных устройств. В результате нижний, более важный контент на экране смартфона поднялся вверх и стал ближе пользователю.


К СПИСКУ УРОКОВ

ЗАМЕНА КОНТЕНТА ДЛЯ УСТРОЙСТВ:

Как заменить контент для смартфоновКак скрыть фото в CSSЗамена блока div для различных устройств

НАЗАД НА ГЛАВНУЮ ДАЛЕЕ


НАЗАД НА ГЛАВНУЮ ДАЛЕЕ


ЗАДАТЬ ВОПРОС ПО САЙТУ