Как изменить ширину шаблона в зависимости от разрешения экрана посетителя?
Страницы: 1
Как изменить ширину шаблона в зависимости от разрешения экрана посетителя?
Был резиновый шаблон для WP. Переделал его в фиксированный, под 1200 пикселей. Но хотелось бы его настроить, чтобы в зависимости от разрешения экрана менялась и ширина сайта. Как можно это реализовать? 
Прочитал на HTML-book про @media, но ничего не получилось с этим кодом. Я что-то не так сделал? Можно ли сделать как-то по-другому?
Код прописал так: 

Код
#art-main
{
  position: relative;
  width: 1200px;
  left: 75px;
  top: 0;
  cursor:default;
 }  
 
@media screen and (device-width: 1600px)  
{ div {width: 1500px;}  
}  
 
@media screen and (device-width: 1280px)  
{ div {width: 1100px;}  
}  
 
@media screen and (device-width: 1024px)  
{ div {width: 980px;}  
}
Вместо чисел поставьте значение "auto"
Цитата
BlackNice пишет:
Вместо чисел поставьте значение "auto"
От этого шаблон снова станет резиновым, а я хочу сохранить фиксированную ширину, только менять ее в зависимости от разрешения экрана.
А как вы собираетесь менять его ширину, при этом не делая шаблон резиновым?
Ааа, примерно понял. Хотя фактической разницы не вижу
Цитата
Андрей Бычков пишет:
Ааа, примерно понял. Хотя фактической разницы не вижу
Я не хочу, чтобы сайт сжимался, если браузер открыт не в полноэкранном режиме. И кроме того, резиновый шаблон нормально отображается только для разрешений с 1024 по 1366, все что шире или уже - страшно косячит. Для них и хочу задать фиксированную ширину.
Цитата
Александр Вашкевич пишет:
Был резиновый шаблон для WP. Переделал его в фиксированный, под 1200 пикселей. Но хотелось бы его настроить, чтобы в зависимости от разрешения экрана менялась и ширина сайта. Как можно это реализовать?
Прочитал на HTML-book про @media, но ничего не получилось с этим кодом. Я что-то не так сделал? Можно ли сделать как-то по-другому?
Код прописал так:
Код
 #art-main
{
  position: relative;
  width: 1200px;
  left: 75px;
  top: 0;
  cursor:default;
 }  
 
@media screen and (device-width: 1600px)  
{ div {width: 1500px;}  
}  
 
@media screen and (device-width: 1280px)  
{ div {width: 1100px;}  
}  
 
@media screen and (device-width: 1024px)  
{ div {width: 980px;}  
}
 
 попробуйте так:




Код
#art-main
{
  position: relative;
  width: 1200px;
  left: 75px;
  top: 0;
  cursor:default;
 }
 @media only screen and (max-width: 1600px) 
{
   #art-main {width: 1500px;}
}
 @media only screen and (max-width: 1280px) 
{
   #art-main {width: 1100px;}
}

 @media only screen and (max-width: 1024px) 
{
   #art-main {width: 980px;}
}
Цитата
Валентин пишет:
попробуйте так:
Огромное спасибо, все заработало! smile:help:
пожалуйста =)
Страницы: 1
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
00:18 Жирная ссылка бесплатно. АПдейт Яндекс выдача 30 мая 2024 
22:56 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 
17:58 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 
16:58 Profit Pixels - In-House Форекс, Крипто, Трейдинг CPA Офферы | Еженедельные Выплаты | CPA до $950 
16:11 Яндекс.Фильтры 
15:21 Adtrafico - Правильная партнёрская сеть под бурж трафик 
11:44 2Index - быстрая индексация страниц сайта и обратных ссылок 
19:25 Услуга чертежника и 3D моделирования 
11:35 Google Voice - OLD аккаунты "SMS и звонки" 
14:45 Coin Click.cc - Быстрый и надежный обмен электронных валют в два клика 
11:22 USMobileSMSBot - 
11:09 Антидетект браузер GoLogin для мультиаккаунтинга 
09:48 Восстановление сайтов из Вебархива на Wordpress 
09:41 Современный скрипт обменника электронных валют 
03:45 Точные прогнозы на футбол 
19:53 С юмором по жизни! 
12:34 Калифорния легализует компостирование людей к 2027 году 
12:11 Налоговую систему сбалансируют к общей пользе 
02:34 Ваше мнение о видео играх 
02:32 Популярный сократитель заблокирован? 
13:29 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди