Адаптация под несколько разрешений

Автор Сообщение

Удалено

#1/26.02.2013 14:30

Так получилось что я изначально нашел на гитубе старую биржу , пробежался по коду шаблонов , а потом уже дошел до аккаунта здесь и покупки биржи 2.0 .  Новую биржу только вчера скачал , и учитывая что буду внедрять ее в существующий дизайн сайта , стала необходимость правок в tpl и css(благо дело не проблема для меня) , но для тех кто далек от этого , может возникнуть затруднение вот в чем:

В старой версии чтобы сделать весь шаблон резиновым (допустим я делал версию от 800 до 1680) , достаточно было убрать абсолютные цифры типа 940px ширины , их было немного , и все решалось на уровне style.css.

В новой версии файл style.css находится по иерархии над файлом bootstrap.min.css , в следствие чего преимущество получает последний , а в нем как раз много абсолютных величин, что затрудняет любые внешние правки для неподкованного пользователя.

<link href="themes/bootlance/css/style.css" type="text/css" rel="stylesheet" />
<link href="themes/bootlance/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />

Допустим чтобы шаблон bootlance начал вести себя более адаптивно , пришлось проделать следующее:

Перед закрывающим хеад прописать еще файлик  :

<link href="themes/bootlance/css/justwebber.css" type="text/css" rel="stylesheet" />

</head>

А в сам файлик уже вывести классы , которые нашел в bootstrap.min.css , после чего файл выглядит так:

 

#wrapper {width:100%;min-width:1024px;max-width:1680px;margin:0 auto;}
#main{width:auto!important;padding:0 10px 0 10px;}

@media (min-width:1024px){
.span8, .span9{width:760px;}
}
@media (min-width:1152px){
span8, .span9{width:888px;}
}
@media (min-width:1280px){
.span8, .span9{width:1016px;}
}
@media (min-width:1360px){
.span8, .span9{width:1096px;}
}
@media (min-width:1440px){
.span8, .span9{width:1176px;}
}
@media (min-width:1600px){
.span8, .span9{width:1336px;}
}
@media (min-width:1680px){
.span8, .span9{width:1416px;}
}

После этих нехитрых манипуляций , мой шаблон подстраивается под экран 1024-1680 , а вынос в отдельный файл нужен для того чтобы , если будет обновление , не трогать основные стили . За основу взято правило css - по которому сколько бы файлов стилей не писалось , главным будет последний (при условии совпадения классов )

 

 

Сообщения:

Cmsworks

Булат
#2/26.02.2013 15:41
0

Администраторы

Карма: +680

Зачем придумывать велосипед, если он уже придуман в самом bootstrap? Чтобы сделать сайт адаптивным можно просто раскомментировать строчку номер 20 в файле themes\bootlance\bootlance.rc.php

cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/bootstrap/css/bootstrap-responsive.css');

Сообщения: 2400

martinm

#3/07.02.2015 00:41
0

Аватар

Пользователи

Карма: 0

привет у меня есть вопросы, я должен добавить это в header  
<meta name="viewport" content="width=device-width, initial-scale=1">
спасибо

 

 

Сообщения: 4

Удалено

#4/07.02.2015 00:52
#6299 martinm:
привет у меня есть вопросы, я должен добавить это в header  
<meta name="viewport" content="width=device-width, initial-scale=1">

Это нужно добавлять  между <head></head> в файле header.tpl

Для соблюдения масштаба на мобильных планшетах и тд

 

Сообщения:

martinm

#5/07.02.2015 01:11
0

Аватар

Пользователи

Карма: 0

спасибо PRoHtml У меня есть еще один вопрос ,kak и я могу добавить ссылку на странице, чтобы перейти взгляды в descop или мобильный
Сообщения: 4

martinm

#7/07.02.2015 03:13
0

Аватар

Пользователи

Карма: 0

nu  Wiper это раскомментировna uze.
nu не достаточно, если вы хотите работать на мобильных устройствах, nada добавите в заголовке meta name viewport . Nu u menja druguoy vapros y ya vizu ti experta kak sdelayet link peresti vzgliadu Descop a Movile . Bolshoe Spasiba

Сообщения: 4

pligin

#8/04.03.2015 22:17
0

Аватар

Пользователи

Карма: +1

#280 devkont:

Зачем придумывать велосипед, если он уже придуман в самом bootstrap? Чтобы сделать сайт адаптивным можно просто раскомментировать строчку номер 20 в файле themes\bootlance\bootlance.rc.php

cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/bootstrap/css/bootstrap-responsive.css');

20-я строка пустая.

строка cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/bootstrap/css/bootstrap-responsive.css'); всегда была раскомментированной.

Сообщения: 25