Вопрос к опытным верстальщикам и оптимизаторам

Автор Тема: Вопрос к опытным верстальщикам и оптимизаторам  (Прочитано 4989 раз)

Оффлайн hatunsАвтор темы

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 2
  • Сообщений: 38
  • Карма: 1
  • Пол: Мужской
    • Познавательный медицинский журнал

Оффлайн hatunsАвтор темы

  • Рекрут
  • *
Пожалуйста , если нужно могу подсказать как на разные экраны автоматически подставлять нужные файлы стилей , например у меня сейчас заказ , в котором нужно чтобы блоки типа голосование , календарь и тд при экранах от 1024 до 1280 были закрыты в блоки 50рх шириной и выезжали по клику , а после 1280 - были раскрыты , вот в таких ситуациях очень помогает ...
Да, конечно. Если сможете подскажите.
Очень интересное решениею


Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 494
  • Сообщений: 965
  • Карма: 87
  • Пол: Мужской
  • Награды КМС поисковой оптимизации

Оффлайн Clever

  • Ветеран
  • *****
Как и обещал , расскажу как можно использовать разные стили для разных экранов монитора без переключения , тоесть автоматически .  Тут все намного проще чем кажется . Допустим у вас есть необходимость на экранах от 1024 до 1280 дать один вид сайта , для  1280 и выше второй .  Делается это с помощью медиазапросов .

Пример:
<link rel="stylesheet" media="screen and (max-width: 1024px) , (max-width: 1088px) , (max-width: 1152px)" href="/templates/invest/style/1024_1280.css" />
<link media="screen" href="/templates/invest/style/1280_more.css" type="text/css" rel="stylesheet" />

Как использовать ?     Берете ваш файл стилей , делаете из него копию , переименовуете , и дописываете медиазапрос между <head></head>

Спокойно правите файл (тот который создали) , и проверяете на разных экранах . Если все сделали правильно , то на разных экранах будет разные стили , хоть шапка , хоть цвет , что угодно.
Лучше всего проверять в опере , там есть ползунок для изменения разрешения.

Оффлайн Dexo

  • Бизнес оценка: (9, 100%)
  • Старожил
  • ****
  • СПАСИБО: 311
  • Сообщений: 472
  • Карма: 75
  • Пол: Мужской
  • Награды КМС поисковой оптимизации
    • Студия дизайна Disarto

Оффлайн Dexo

  • Старожил
  • ****
Спасибо, вполне возможно что скоро эта информация понадобится.

Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 494
  • Сообщений: 965
  • Карма: 87
  • Пол: Мужской
  • Награды КМС поисковой оптимизации

Оффлайн Clever

  • Ветеран
  • *****
Там очень много возможностей , можно адаптировать под айфоны , принтеры , телевизоры , мобильные устройства ,  и еще много возможностей. 

Оффлайн hatunsАвтор темы

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 2
  • Сообщений: 38
  • Карма: 1
  • Пол: Мужской
    • Познавательный медицинский журнал

Оффлайн hatunsАвтор темы

  • Рекрут
  • *
Пожалуйста , если нужно могу подсказать как на разные экраны автоматически подставлять нужные файлы стилей , например у меня сейчас заказ , в котором нужно чтобы блоки типа голосование , календарь и тд при экранах от 1024 до 1280 были закрыты в блоки 50рх шириной и выезжали по клику , а после 1280 - были раскрыты , вот в таких ситуациях очень помогает ...
А как сделать чтобы блоки типа голосование , календарь и тд при экранах от 1024 до 1280 были закрыты в блоки 50рх шириной и выезжали по клику?


Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 494
  • Сообщений: 965
  • Карма: 87
  • Пол: Мужской
  • Награды КМС поисковой оптимизации

Оффлайн Clever

  • Ветеран
  • *****
А как сделать чтобы блоки типа голосование , календарь и тд при экранах от 1024 до 1280 были закрыты в блоки 50рх шириной и выезжали по клику?
Сейчас только заметил что забыл в этой теме ответить , сам же предложил рассказать  :)
Итак , чтобы до 1280 боковые блоки были закрыты , но при клике открывались , и при этом на 1280 и больше были всегда открыты , нам понадобится:
Приведу на примере как я выводил таким образом один из блоков , допустим голосовалку в дле:

<div class="votebl"></div> <!--Это див , параметры для которого прописаны только для разрешения ниже 1280 , и указана ширина видимого блока 50px  , в стилях для 1280 и выше не пишем ничего-->               
<div class="votehide"><!--Этот див в стилях для 1024 ставим display:none -->
  <br />{vote}   <!--Cама голосовалка контент опроса-->
</div>
И небольшой кусочек квери. Поэтому нужно чтобы он был подключен для данного варианта
<script type="text/javascript">
$('.votebl').click(function(){
      $('.votehide').slideToggle(550);
      return false;
             });
</script>

Вживую реализацию можно посмотреть здесь

Не забудьте что это появляется только на маленьком разрешении

Оффлайн hatunsАвтор темы

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 2
  • Сообщений: 38
  • Карма: 1
  • Пол: Мужской
    • Познавательный медицинский журнал

Оффлайн hatunsАвтор темы

  • Рекрут
  • *
Сейчас только заметил что забыл в этой теме ответить , сам же предложил рассказать  :)
Итак , чтобы до 1280 боковые блоки были закрыты , но при клике открывались , и при этом на 1280 и больше были всегда открыты , нам понадобится:
Приведу на примере как я выводил таким образом один из блоков , допустим голосовалку в дле:

<div class="votebl"></div> <!--Это див , параметры для которого прописаны только для разрешения ниже 1280 , и указана ширина видимого блока 50px  , в стилях для 1280 и выше не пишем ничего-->               
<div class="votehide"><!--Этот див в стилях для 1024 ставим display:none -->
  <br />{vote}   <!--Cама голосовалка контент опроса-->
</div>
И небольшой кусочек квери. Поэтому нужно чтобы он был подключен для данного варианта
<script type="text/javascript">
$('.votebl').click(function(){
      $('.votehide').slideToggle(550);
      return false;
             });
</script>

Вживую реализацию можно посмотреть здесь

Не забудьте что это появляется только на маленьком разрешении

Да посмотрел по ссылке, то что мне надо. Попробую реализовать сегодня вечером, как доберусь до домашнего компа. Правда у меня не дле и не знаю получится реализовать как вы описали.

Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 494
  • Сообщений: 965
  • Карма: 87
  • Пол: Мужской
  • Награды КМС поисковой оптимизации

Оффлайн Clever

  • Ветеран
  • *****
Да посмотрел по ссылке, то что мне надо. Попробую реализовать сегодня вечером, как доберусь до домашнего компа. Правда у меня не дле и не знаю получится реализовать как вы описали.

Это можно реализовать на любом движке или без него , даже в html-сайтах , просто нужно чтобы квери библиотека была подключена , допустим одну из этих:



 

Похожие темы

  Тема / Автор Ответов Последний ответ
2 Ответов
1689 Просмотров
Последний ответ 31-01-2011, 23:07:10
от LeGront
8 Ответов
3462 Просмотров
Последний ответ 08-08-2012, 18:44:43
от msutki
0 Ответов
1761 Просмотров
Последний ответ 17-03-2013, 21:21:57
от Владимир75
17 Ответов
5273 Просмотров
Последний ответ 23-05-2013, 00:08:16
от itbc
5 Ответов
1811 Просмотров
Последний ответ 16-05-2017, 11:14:48
от Coder