Перейти к содержимому


Фотография
- - - - -

MEDIA QUERIES Jblank

media queries

Лучший Ответ CB9TOIIIA , 05 May 2015 - 19:42

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

 

WAsH.gif

 

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

 

Вообще дополнил, у заказчика 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)";

Перейти к сообщению


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

#1 CB9TOIIIA

CB9TOIIIA

Отправлено 05 May 2015 - 07:04

Как пользоваться 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}

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


  • 0

#2 CB9TOIIIA

CB9TOIIIA

Отправлено 05 May 2015 - 07:48

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


@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)";


  • 0

#3 CB9TOIIIA

CB9TOIIIA

Отправлено 05 May 2015 - 08:11

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


// ***************************************** 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)";


  • 1

#4 SmetDenis

SmetDenis

Отправлено 05 May 2015 - 19:29

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

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

 

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


  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как моно скорее!


— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.


#5 CB9TOIIIA

CB9TOIIIA

Отправлено 05 May 2015 - 19:42   Лучший Ответ

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

 

WAsH.gif

 

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

 

Вообще дополнил, у заказчика 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)";


  • 3

#6 SmetDenis

SmetDenis

Отправлено 05 May 2015 - 19:55

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

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

 

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


  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как моно скорее!


— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.


#7 CB9TOIIIA

CB9TOIIIA

Отправлено 05 May 2015 - 19:58

Много всего:
 
3Eru0bS.png
 
Гифки люблю через gifcam
 
http://blog.bahraniapps.com/gifcam/ Скачать

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

  • 1

#8 SmetDenis

SmetDenis

Отправлено 05 May 2015 - 20:00

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

 

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


  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как моно скорее!


— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.


#9 CB9TOIIIA

CB9TOIIIA

Отправлено 05 May 2015 - 20:04

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

e5mq6WX.gif
 

или так:

 

axa9q0j.gif
 


  • 1

#10 SmetDenis

SmetDenis

Отправлено 05 May 2015 - 20:06

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


  • 1
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как моно скорее!


— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.





Click to return to top of page in style!