Перейти к содержанию
Benjamin

Замена CSS в зависимости от разрешения посетителя сайта

Рекомендуемые сообщения

Добрый вечер! Столкнулся с такой проблемой, что на разных разрешениях фон моего сайта выглядит не красиво. Нашел решение на JS с заменой CSS в зависимости от разрешения посетителя.

Мои действия:

  • Прописал все условия в файле common.js
  • Сделал стили для новых разрешений.

Не знаю как запустить свою функцию. В каком файле подключается этот скрипт? Спасибо!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

В header.tpl полагаю.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Тем более все написано в уроке, который вы опубликовали

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Добрый вечер! Столкнулся с такой проблемой, что на разных разрешениях фон моего сайта выглядит не красиво. Нашел решение на JS с заменой CSS в зависимости от разрешения посетителя.

Мои действия:

  • Прописал все условия в файле common.js
  • Сделал стили для новых разрешений.

Не знаю как запустить свою функцию. В каком файле подключается этот скрипт? Спасибо!

А вы то в принципе представляете как JS код в браузере работает?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Теперь остаётся сохранить данную функцию в файле javascript.js и перед закрывающемся тегом </head> сделать подключение и запуск.

<script  type="text/javascript"  src="javascript.js"></script>
<script  type="text/javascript">
window.onload  = changeCss;
</script>
</head>

Вот и всё.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Это я погоречился!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Добрый вечер! Столкнулся с такой проблемой, что на разных разрешениях фон моего сайта выглядит не красиво. Нашел решение на JS с заменой CSS в зависимости от разрешения посетителя.

Думаю, подключение JS - это несколько избыточная мера, поскольку всё решается средствами CSS.

	@media only screen and (min-width:960px){
		/* стили для браузеров более 960px по ширине; */
		body {background: #FFFFFF url('../image/bg1.jpg');}
	}
	@media only screen and (min-width:1440px){
		/* стили для браузеров более 1440px по ширине; */
		body {background: #FFFFFF url('../image/bg2.jpg');}
	}

	@media only screen and (max-device-width:480px){
	   /* стили для браузеров менее 480px по ширине; (iPhone) */
		body {background: #FFFFFF url('../image/bg3.jpg');}
	}
	@media only screen and (device-width:768px){
	   /* стили для iPad */
	}
	/* different techniques for iPad screening */
	@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
	  /* стили для вертикальной ориентации экрана мобильного уст-ва */
	}

	@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
	  /* стили для горизонтальной ориентации экрана мобильного уст-ва */
	}
Соответственно, вы можете задать произвольный фон (и не только фон) под любое разрешение окна браузера.
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Привильно, но я не очень понимаю таких фитчь)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.