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

[Benjamin]

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

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

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

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

[vadik21]

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

[vadik21]

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

[EVMedvedev]

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

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

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

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

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

[vadik21]

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

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

Вот и всё.

[vadik21]

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

[vlady2k]

Добрый вечер! Столкнулся с такой проблемой, что на разных разрешениях фон моего сайта выглядит не красиво. Нашел решение на 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) {
	  /* стили для горизонтальной ориентации экрана мобильного уст-ва */
	}

Соответственно, вы можете задать произвольный фон (и не только фон) под любое разрешение окна браузера.

[vadik21]

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