Size: a a a

CSS — русскоговорящее сообщество

2017 February 21

АГ

Андрей Гуртовой in CSS — русскоговорящее сообщество
а теперь у меня  там  не только друзья )
источник

VN

Vera Nekrasova in CSS — русскоговорящее сообщество
Но и кровные враги?
источник

АГ

Андрей Гуртовой in CSS — русскоговорящее сообщество
точно :)
источник

АГ

Андрей Гуртовой in CSS — русскоговорящее сообщество
нет  конечно же -  они все мои друзья
источник

АГ

Андрей Гуртовой in CSS — русскоговорящее сообщество
но с некоторыми не знаком
источник
2017 February 23

НА

Нави Арх in CSS — русскоговорящее сообщество
Мне интересно, кто нибудь так делает: ?
* @section adaptive dimension rem
  ==================================== */
   :root {
       —pixel-ratio: 1;
       font-size: 100%;
   }
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min-resolution: 1.5dppx) {
 :root {
       —pixel-ratio: 1.5;
       font-size: 150%;
   }
}
@media
(-webkit-min-device-pixel-ratio: 2),
(min--moz-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2/1),
(min-resolution: 2dppx) {
 :root {
       —pixel-ratio: 2;
       font-size: 200%;
   }
}
@media
(-webkit-min-device-pixel-ratio: 2.5),
(min--moz-device-pixel-ratio: 2.5),
(-o-min-device-pixel-ratio: 5/2),
(min-resolution: 2.5dppx) {
 :root {
       —pixel-ratio: 2.5;
       font-size: 250%;
   }
}
@media
(-webkit-min-device-pixel-ratio: 3),
(min--moz-device-pixel-ratio: 3),
(-o-min-device-pixel-ratio: 3/1),
(min-resolution: 3dppx) {
 :root {
       —pixel-ratio: 3;
       font-size: 300%;
   }
}
источник

VS

Vladimir Starkov in CSS — русскоговорящее сообщество
Нави Арх
Мне интересно, кто нибудь так делает: ?
* @section adaptive dimension rem
  ==================================== */
   :root {
       —pixel-ratio: 1;
       font-size: 100%;
   }
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min-resolution: 1.5dppx) {
 :root {
       —pixel-ratio: 1.5;
       font-size: 150%;
   }
}
@media
(-webkit-min-device-pixel-ratio: 2),
(min--moz-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2/1),
(min-resolution: 2dppx) {
 :root {
       —pixel-ratio: 2;
       font-size: 200%;
   }
}
@media
(-webkit-min-device-pixel-ratio: 2.5),
(min--moz-device-pixel-ratio: 2.5),
(-o-min-device-pixel-ratio: 5/2),
(min-resolution: 2.5dppx) {
 :root {
       —pixel-ratio: 2.5;
       font-size: 250%;
   }
}
@media
(-webkit-min-device-pixel-ratio: 3),
(min--moz-device-pixel-ratio: 3),
(-o-min-device-pixel-ratio: 3/1),
(min-resolution: 3dppx) {
 :root {
       —pixel-ratio: 3;
       font-size: 300%;
   }
}
только те кому не нужны IE & EDGE
источник

VS

Vladimir Starkov in CSS — русскоговорящее сообщество
а значит только прототипы
источник

НА

Нави Арх in CSS — русскоговорящее сообщество
ну min-resolutio все уже браузеры понимают:
http://caniuse.com/#search=resolution%20feature ,
а переменные - как дополнительно. Используя размерности rem и em уже можно строить одинаковые размеры шрифтов и плясать размеры блоков
источник
2017 February 24

НА

Нави Арх in CSS — русскоговорящее сообщество
в общем, я чуток провёл исследование использования content="width=device-width".
Если указывать на странице:
<meta name="viewport" content="width=device-width">,
то мы получим стандартный вариант, используемый обычно, при этом физические пиксели смартфона не адаптируются в css, что можно наблюдать на http://squirtle.su/2/ (внизу нарисованы полоски в толшину с дробными css-пикселями соответствующие толшине физических пикселей экрана.
Если мы укажем:
<meta name="viewport" content="width=(количество физических пикселей по ширине)">,
то сможем работать из css с каждым физическим пикселем по отдельности, на http://squirtle.su/3/ видно, что вертикальных линий 10 и они тоньше, что и доказывает несостоятельность предыдущего примера, где так же должно было быть 10 вертикальных полосок.
Без тега "viewport" каждый смартфон устанавливает своё значение и оно так же не соответствует физическим пикселям экрана.
Во втором примере я указал точную ширину content="width=(количество физических пикселей по ширине)" - с помошью js:
document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=' + window.outerWidth*window.devicePixelRatio + ', initial-scale=' + 1/window.devicePixelRatio + '"');
   document.querySelector(':root').setAttribute('style', 'font-size:' + 100*window.devicePixelRatio + '%');
источник

НА

Нави Арх in CSS — русскоговорящее сообщество
У каждого смартфона свой коэфициент window.devicePixelRatio, и хотелось бы узнать, у других так же по первому примеру (http://squirtle.su/2/) вертикальных полос 5 или 6, а не 10, и они не такие тонкие как во втором примере ?
источник

АГ

Андрей Гуртовой in CSS — русскоговорящее сообщество
О! достаточно полезное исследование
источник
2017 February 25

НА

Нави Арх in CSS — русскоговорящее сообщество
такой скрипт делает CSS-пиксели равными физическим пикселям экрана устройства:

window.isMobile = (function (userAgent) {
 return !!userAgent.match(|webos|ip(hone|ad|od)|opera (mini|mobi|tablet)|iemobile|windows.+(phone|touch)|mobile|fennec|kindle (Fire)|Silk|maemo|blackberry|playbook|bb10\; (touch|kbd)|Symbian(OS)|Ubuntu Touch/i);
}(navigator.userAgent));
if (isMobile) {
   if (document.querySelector('meta[name="viewport"]') === null) {
       var viewport = document.createElement('meta');
       viewport.setAttribute('name', 'viewport');
       document.head.insertBefore(viewport, document.head.firstChild)
   }
   document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=' + document.documentElement.clientWidth*window.devicePixelRatio + ', initial-scale=' + 1/window.devicePixelRatio + '');
   document.querySelector(':root').setAttribute('style', 'width: 100%; height: 100%; font-size:' + 100*window.devicePixelRatio + '%');
}

Скрипт вполне себе маленький.
Оссобенность важная, что все размеры css, указанные в 'px' станут в devicePixelRatio раз меньше, другие единицы измерения не пострадают.
источник

АГ

Андрей Гуртовой in CSS — русскоговорящее сообщество
В гитхаб его запиши.
источник

НА

Нави Арх in CSS — русскоговорящее сообщество
сначала на следующем сайте своём проверю
источник
2017 February 27

NK

ID:232168779 in CSS — русскоговорящее сообщество
Всем привет. Собрал в одном месте все чаты для программистов -  @Chats_Developers, пользуйтесь на здоровье. Ваш чат у нас тоже есть, не удаляйте это сообщение.
источник
2017 February 28

NK

ID:200573724 in CSS — русскоговорящее сообщество
тут все админят?
источник

АГ

Андрей Гуртовой in CSS — русскоговорящее сообщество
До какогото момента)) думаю первые человек 50
источник

VS

Vladimir Starkov in CSS — русскоговорящее сообщество
источник
2017 March 01

АГ

Андрей Гуртовой in CSS — русскоговорящее сообщество
очень трогательный доклад :)
источник