Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

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

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

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

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

Надіслати
Поділитися на інших сайтах


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

    • Ні користувачів, які переглядиють цю сторінку

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.