Сообщений в теме: 12

[CB9TOIIIA]

Как пользоваться MEDIA QUERIES? т.е. в LESS файле есть:

// ***************************************** MEDIA QUERIES *************************************************************
// see variables.less
@media @print       { @import "media/print.less";       }
@media @mobile-mini { @import "media/mobile-mini.less"; }
@media @mobile      { @import "media/mobile.less";      }
@media @tablet-mini { @import "media/tablet-mini.less"; }
@media @tablet      { @import "media/tablet.less";      }
@media @desktop     { @import "media/desktop.less";     }
@media @desktop-xl  { @import "media/desktop-xl.less";  }
@media @retina      { @import "media/retina.less";      }

Я предпологал иду в media/mobile.less пишу:

html {color: red !important}

и оно работает, а нет.... не хочет)) ЧЯДНТ?

[CB9TOIIIA]

а нет, пашет надо читать доки:

@print:       ~"print";                               // print version of website
@mobile-mini: ~"only screen and (min-width: 320px)";  // smartphones, iPhone, portrait 480x320 phones
@mobile:      ~"only screen and (min-width: 480px)";  // portrait e-readers (Nook/Kindle), smaller tablets 600 or 640 wide
@tablet-mini: ~"only screen and (min-width: 600px)";  // portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones
@tablet:      ~"only screen and (min-width: 801px)";  // tablet, landscape iPad, lo-res laptops ands desktops
@desktop:     ~"only screen and (min-width: 1025px)"; // big landscape tablets, laptops, and desktops
@desktop-xl:  ~"only screen and (min-width: 1281px)"; // hi-res laptops and desktops

// devices with retina display (http://css-tricks.com/snippets/css/retina-display-media-query/)
@retina: ~"only screen and (-webkit-min-device-pixel-ratio: 2)",
         ~"only screen and (   min--moz-device-pixel-ratio: 2)",
         ~"only screen and (     -o-min-device-pixel-ratio: 2/1)",
         ~"only screen and (        min-device-pixel-ratio: 2)",
         ~"only screen and (           min-resolution: 192dpi)",
         ~"only screen and (            min-resolution: 2dppx)";

[CB9TOIIIA]

Стили у всех разный, под свой подпилил:

// ***************************************** Media queries for different devices ***************************************
// more info https://gist.github.com/gitawego/5803557
@print:       ~"print";                               // print version of website
@mobile-mini: ~"only screen and (min-width: 320px) and (max-width: 479px)";  // smartphones, iPhone, portrait 480x320 phones
@mobile:      ~"only screen and (min-width: 480px) and (max-width: 599px)";  // smaller tablets 600 or 640 wide
@tablet-mini: ~"only screen and (min-width: 600px) and (max-width: 800px)";  // portrait tablets, portrait iPad
@tablet:      ~"only screen and (min-width: 801px) and (max-width: 1024px)";  // tablet, landscape iPad
@desktop:     ~"only screen and (min-width: 1025px) and (max-width: 1280px)"; // big landscape tablets, laptops
@desktop-xl:  ~"only screen and (min-width: 1281px)"; // hi-res laptops and desktops

// devices with retina display (http://css-tricks.com/snippets/css/retina-display-media-query/)
@retina: ~"only screen and (-webkit-min-device-pixel-ratio: 2)",
         ~"only screen and (   min--moz-device-pixel-ratio: 2)",
         ~"only screen and (     -o-min-device-pixel-ratio: 2/1)",
         ~"only screen and (        min-device-pixel-ratio: 2)",
         ~"only screen and (           min-resolution: 192dpi)",
         ~"only screen and (            min-resolution: 2dppx)";

[SmetDenis]

Можете потом приложить ссылку на свой сайт?

Очень хочется посмотреть, как используется шаблон (особенно css/less) в полевых условиях

 

PS Вот думаю, может и правда последний вариант media query будет удачнее для верстки...

[CB9TOIIIA]

конечно только еще наверное 2-3 недели буду верстать, много всего надо.

 

 

сайт салона красоты редизайн делаю.

 

Вообще дополнил, у заказчика 1366 ноут, поэтому вот так:

// ***************************************** Media queries for different devices ***************************************
// more info https://gist.github.com/gitawego/5803557
@print:       ~"print";                               // print version of website
@mobile-mini: ~"only screen and (min-width: 320px) and (max-width: 479px)";  // smartphones, iPhone, portrait 480x320 phones
@mobile:      ~"only screen and (min-width: 480px) and (max-width: 599px)";  // smaller tablets 600 or 640 wide
@tablet-mini: ~"only screen and (min-width: 600px) and (max-width: 800px)";  // portrait tablets, portrait iPad
@tablet:      ~"only screen and (min-width: 801px) and (max-width: 1024px)";  // tablet, landscape iPad
@desktop:     ~"only screen and (min-width: 1025px) and (max-width: 1280px)"; // big landscape tablets, laptops
@desktop-xl:  ~"only screen and (min-width: 1281px) and (max-width: 1365px)"; // hi-res laptops and desktops
@desktop-xxl:  ~"only screen and (min-width: 1366px)"; //  desktops

// devices with retina display (http://css-tricks.com/snippets/css/retina-display-media-query/)
@retina: ~"only screen and (-webkit-min-device-pixel-ratio: 2)",
         ~"only screen and (   min--moz-device-pixel-ratio: 2)",
         ~"only screen and (     -o-min-device-pixel-ratio: 2/1)",
         ~"only screen and (        min-device-pixel-ratio: 2)",
         ~"only screen and (           min-resolution: 192dpi)",
         ~"only screen and (            min-resolution: 2dppx)";

[SmetDenis]

только еще наверное 2-3 недели буду верстать, много всего надо.

Ок, я не тороплюсь))

 

PS А в чем гифки делаешь? =) Моя тоже хоть))

[CB9TOIIIA]

Много всего:
 

 
Гифки люблю через gifcam
 
http://blog.bahraniapps.com/gifcam/ Скачать

Сообщение отредактировал CB9TOIIIA: 05 May 2015 - 19:58

[SmetDenis]

Да простят меня админы этого форума за офтоп

 

Не встречалось ли гиф-мейкера, который еще и на ftp или сторонний сервис заливать могла б. Как классическая скриншотилка.

[CB9TOIIIA]

Неа, но и не надо... мне удобней в image uploader кинуть:

 

или так:

 

 

[SmetDenis]

Шикарно! Нужно пробовать