• Страница 1 из 1
  • 1
Модератор форума: JonMagon  
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Смена CSS в зависимости от разрешения экрана пользователя
Смена CSS в зависимости от разрешения экрана пользователя
WasaBeS
Сообщений: 70
Репутация: 40

Сообщение # 1 | 22:56:15 26 Мар 2015
Пробовал так:
Код
function  changeCss() {
                    var w =  screen.width;
                    var h =  screen.height;
                    if (w <=  '1024' && h <= '768')
                        {
                       document.getElementById("stylesheet").href="css/style_1024х768.css";
                        }
                    else
                          {
                       if (w == '1152' && h ==  '864')
                           {
                           document.getElementById("stylesheet").href="css/style_1152х864.css";
                           }
                          else
                           {
                           if (w == '1280'  && h == '800')
                           {
                           document.getElementById("stylesheet").href="css/style_1280х800.css";
                           }
                           else
                           {
                           if (w >= '1280' && h >=  '1024')
                           {
                           document.getElementById("stylesheet").href="css/style_1024х1024.css";
                           }
                           };
                           };
                        };
                   };

безуспешно... Подскажите, как еще возможно реализовать?

P.S. @media запросом тоже пробовал, результата не дало.
mini-gallery.cf
Сообщение отредактировал WasaBeS - Четверг, 26 Мар 2015, 23:02:00
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 2 | 23:01:43 26 Мар 2015
Посмотрите тут
Надеюсь, это то что нужно

http://rgblog.ru/page/stili-sajta-pod-raznoe-razreshenie-ekrana

удачи =)

WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Четверг, 26 Мар 2015, 23:03:35
WasaBeS
Сообщений: 70
Репутация: 40

Сообщение # 3 | 23:12:50 26 Мар 2015
Dogica,
Код
<script type="text/javascript">
{
      //При ширине экрана < 1280
      if (screen.width < 1280)
          document.write ('<link rel="stylesheet" href = "main1024.css" type="text/css">');
      //иначе
      else
          document.write ('<link rel="stylesheet" href = "main.css" type="text/css">');
}
</script>


Код
//иначе
      else
          document.write ('<link rel="stylesheet" href = "main.css" type="text/css">');
}

Здесь должен быть исходный CSS файл, я правильно понял?
mini-gallery.cf
Сообщение отредактировал WasaBeS - Четверг, 26 Мар 2015, 23:13:25
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 4 | 23:23:13 26 Мар 2015
При ширине экрана МЕНЬШЕ 1280 -> подключать main1024.css
в остальных случаях -> подключать main.css

какой исходный из этих двух - вам решать
это неважно
поменяйте местами эти CSS если нужно наоборот

WWW.DOGICA.COM / WWW.DOGICA.ORG
WasaBeS
Сообщений: 70
Репутация: 40

Сообщение # 5 | 23:29:21 26 Мар 2015
Запутался. Мне нужно, чтобы у пользователя с разрешением экрана 1366 х 854, к примеру, подключался CSS с настройками под это разрешение, т.е. я делаю так:

Код
<script type="text/javascript">
     {
     if (screen.width < 1367)
     document.write ('<link rel="stylesheet" href = "1366.css" type="text/css">');
     else
     document.write ('<link rel="stylesheet" href = "исходный.css" type="text/css">');
     }
     </script>

Верно?
mini-gallery.cf
Сообщение отредактировал WasaBeS - Четверг, 26 Мар 2015, 23:32:34
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 6 | 23:47:00 26 Мар 2015
указанный вами код загрузит файл 1366.css в случае если разрешение пользователя будет меньше 1367
а в остальных случаях (если разрешение будет равно 1367 или больше) будет подгружен файл исходный.css

WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Четверг, 26 Мар 2015, 23:47:23
WasaBeS
Сообщений: 70
Репутация: 40

Сообщение # 7 | 23:51:37 26 Мар 2015
Нужно чтобы к каждому разрешению подгружался свой CSS...

Код
<script type="text/javascript">
   {
   if (screen.width <= 1920)
   document.write ('<link rel="stylesheet" href = "1.css" type="text/css">');
   else if (screen.width == 1680)
   document.write ('<link rel="stylesheet" href = "2.css" type="text/css">');
   else if (screen.width == 1600)
   document.write ('<link rel="stylesheet" href = "3.css" type="text/css">');
   else if (screen.width == 1440)
   document.write ('<link rel="stylesheet" href = "4.css" type="text/css">');
   else if (screen.width == 1366)
   document.write ('<link rel="stylesheet" href = "5.css" type="text/css">');
   else if (screen.width == 1280)
   document.write ('<link rel="stylesheet" href = "6.css" type="text/css">');
   else
   document.write ('<link rel="stylesheet" href = "исходный.css" type="text/css">');
   }
   </script>

Данный скрипт подгружает только "1.css". Не понимаю.
mini-gallery.cf
Сообщение отредактировал WasaBeS - Четверг, 26 Мар 2015, 23:53:28
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 8 | 23:57:55 26 Мар 2015
Ну для начала разберитесь с простым вариантом
Код
<script type="text/javascript">  
      {  
      if (screen.width < 1367)  
      document.write ('<link rel="stylesheet" href = "1366.css" type="text/css">');  
      else  
      document.write ('<link rel="stylesheet" href = "исходный.css" type="text/css">');  
      }  
      </script>
вот это работает как нужно?

WWW.DOGICA.COM / WWW.DOGICA.ORG
WasaBeS
Сообщений: 70
Репутация: 40

Сообщение # 9 | 00:04:37 27 Мар 2015
Для всего что меньше 1367, подключается CSS с настройками под разрешение 1366 х 854 ("1366.css"), для всего что больше - "исходный.css". Можно сказать, что работает как нужно, но не совсем.
mini-gallery.cf
Сообщение отредактировал WasaBeS - Пятница, 27 Мар 2015, 00:06:04
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 10 | 00:24:02 27 Мар 2015
что не устраивает конкретно?

WWW.DOGICA.COM / WWW.DOGICA.ORG
WasaBeS
Сообщений: 70
Репутация: 40

Сообщение # 11 | 00:28:20 27 Мар 2015
Если у пользователя разрешение экрана 1280 х 800, будет подгружаться 1366.css, а нужно, чтобы подгружался 1280.css и так для каждого разрешения, т.е. к 1920 свой, к 1440 свой и т.д.
mini-gallery.cf
Сообщение отредактировал WasaBeS - Пятница, 27 Мар 2015, 00:50:55
warwar44
Сообщений: 12
Репутация: 0

Сообщение # 12 | 11:24:37 27 Мар 2015
Столкнулся с проблемой, на смартфонах сайт отлично ведёт себя кроме samsung duos Не корректно отображается сайт betonvbalashihe.ru
, как можно исправить эту проблему ?
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 13 | 12:28:05 27 Мар 2015
Цитата WasaBeS ()
Если у пользователя разрешение экрана 1280 х 800, будет подгружаться 1366.css, а нужно, чтобы подгружался 1280.css и так для каждого разрешения, т.е. к 1920 свой, к 1440 свой и т.д.
ждите ответов и помощи других более просвященных и програмирующих пользователей (тут есть такие)
следите за топиком...
я не силен в програмировании к сожалению
чем смог - помог.

WWW.DOGICA.COM / WWW.DOGICA.ORG
WasaBeS
Сообщений: 70
Репутация: 40

Сообщение # 14 | 12:38:28 27 Мар 2015
Dogica, я сделал проще, взял среднее значение, т.е. у меня разрешение экрана 1440, все что меньше этого значения будет подгружать CSS с настройками под разрешение 1366 (смотрится вполне не плохо на 1280 и ниже), ну а всё, что больше - 1920 (1600 и 1620, тоже смотрится нормально), соответственно у тех у кого разрешение 1440 будет подгружать исходный CSS.
Конечно это не совсем то, что я задумал изначально, но все же лучше чем ничего =)

Выглядит это все так:

Код
<script type="text/javascript">
           {
           if (screen.width < 1440)
           document.write ('<link rel="stylesheet" href = "1366.css" type="text/css">');
           else if (screen.width > 1440)
           document.write ('<link rel="stylesheet" href = "1920.css" type="text/css">');
           else
           document.write ('<link rel="stylesheet" href = "1440.css" type="text/css">');
           }
           </script>

Спасибо за помощь.
mini-gallery.cf
Сообщение отредактировал WasaBeS - Пятница, 27 Мар 2015, 12:47:29
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 15 | 12:42:14 27 Мар 2015
up v

WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Смена CSS в зависимости от разрешения экрана пользователя
  • Страница 1 из 1
  • 1
Поиск: