Урок 8. Замена контента в CSS

Иногда необходимо сделать так, чтобы картинка на сайте отображалась одна, а на устройствах, например, на смартфонах отображалась другая либо на сайте отображалось фото большего размера, чем на смартфонах. Как это сделать? На самом деле ничего сложного. Картинке задаем определенный класс, например, .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 от пользователя мобильных устройств. В результате нижний, более важный контент на экране смартфона поднялся вверх и стал ближе к пользователю, стал более доступным. Посещяемость сайтов с устройств сегодня по статистике гораздо выше, чем с компьютеров.