установка значения завихрения в зависимости от текущего устройства

Использование бутстрапа (3.3.6.) И twig (1.24.0) есть способ установить различное значение для некоторой переменной веточки, в зависимости от текущего устройства ? Я полагаю, что-то вродеустановка значения завихрения в зависимости от текущего устройства

<div class="visible-xs">{% set images_in_1_row = 1 %}</div> 
<div class="visible-sm">{% set images_in_1_row = 2 %}</div> 
<div class="visible-md">{% set images_in_1_row = 3 %}</div> 
<div class="visible-lg">{% set images_in_1_row = 4 %}</div>

и если текущее устройство является Ipad, я полагаю, images_in_1_row имеет значение "2", но не "4" ...

Спасибо!

источник

2016-07-13 mstdmstd

Как бы Twig знать, если вы используете IPad или что-то еще? – Jocelyn

Это невозможно сделать с веточкой. Twig скомпилирован в PHP, а PHP интерпретируется serveride. Что вам нужно сделать, так это использовать mediaqueries для изменения количества изображений в одной строке. – DarkBee

Не могли бы вы предоставить ссылки на примеры использования медиа-запросов? – mstdmstd

Просто небольшой фрагмент кода, как вы должны делать это с CSS:

\t \t \t * { 
 
\t \t \t \t margin : 0; 
 
\t \t \t \t padding : 0; 
 
\t \t \t } 
 
\t \t \t #container { 
 
\t \t \t \t width : 1000px; 
 
\t \t \t \t background : #DFF2BF; 
 
\t \t \t \t min-height : 100vh; 
 
\t \t \t \t border-left : 1px solid #4f8a10; 
 
\t \t \t \t border-right : 1px solid #4f8a10; 
 
\t \t \t \t margin: 0 auto; 
 
\t \t \t } 
 
\t \t \t .clear { 
 
\t \t \t \t clear : both; 
 
\t \t \t } 
 
\t \t \t ul { 
 
\t \t \t \t list-style : none; 
 
\t \t \t \t padding : 25px; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t ul li { 
 
\t \t \t \t width :300px; 
 
\t \t \t \t margin : 0 25px 25px 0; 
 
\t \t \t \t float : left; 
 
\t \t \t } 
 
\t \t \t ul li img { 
 
\t \t \t \t width: 100%; 
 
\t \t \t } 
 
\t \t \t ul li:nth-of-type(3n) { 
 
\t \t \t \t margin-right: 0; 
 
\t \t \t } 
 
\t \t \t @media only screen and (min-width: 768px) and (max-width: 999px) { 
 
\t \t \t \t #container { 
 
\t \t \t \t \t width : 768px; 
 
\t \t \t \t } 
 
\t \t \t \t ul li { 
 
\t \t \t \t \t width: 345px; 
 
\t \t \t \t } 
 
\t \t \t \t ul li:nth-of-type(2n) { 
 
\t \t \t \t \t margin-right: 0; 
 
\t \t \t \t } 
 
\t \t \t \t ul li:nth-of-type(2n+1) { 
 
\t \t \t \t \t margin-right : 25px; 
 
\t \t \t \t } 
 
\t \t \t } 
 

 
\t \t \t @media only screen and (min-width: 480px) and (max-width: 767px) { 
 
\t \t \t \t #container { 
 
\t \t \t \t \t width : 480px; 
 
\t \t \t \t } 
 
\t \t \t \t ul li { 
 
\t \t \t \t \t width : 430px; 
 
\t \t \t \t \t margin-right 0; 
 
\t \t \t \t } 
 
\t \t \t } 
 

 
\t \t \t @media only screen and (max-width: 479px) { 
 
\t \t \t \t #container { 
 
\t \t \t \t \t width : 320px; 
 
\t \t \t \t } 
 
\t \t \t \t ul li { 
 
\t \t \t \t \t width : 280px; 
 
\t \t \t \t \t margin-right 0; 
 
\t \t \t \t } 
 
\t \t \t }

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
     <title>Mediaqueries Gallery</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="container"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li> 
 
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li> 
 
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li> 
 
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li> 
 
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li> 
 
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li> 
 
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li> 
 
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li> 
 
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li> 
 
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li> 
 
\t \t \t \t <li><img src="http://www.bekijksite.be/test/placeholder.png" /></li> 
 
\t \t \t </ul> 
 
\t \t \t <div class="clear"></div> 
 
\t \t </div> 
 
\t </body> 
 
</html>

источник

2016-07-15 06:01:17 DarkBee

установка значения завихрения в зависимости от текущего устройства

ответ

Смежные вопросы