Jump to content
Sign in to follow this  
Benjamin

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

Recommended Posts

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

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

Вот и всё.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.