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

Question

[Алексей Демин]

Привет, коллеги!

Запутался с PX и EM. При верстке использую Flexbox grid, media указана в EM
@media only screen and (min-width: 48em)

есть код типа

<div class="col-xs-12 col-sm-12 col-md-6 cal-lg-6"></div>

Если принять размер пикселя равным 16, то все должно отображаться нормально (768px) и должно отработать правило .col-sm-12, как бы мне и надо.
Но этого не происходит!
У меня это правило (.col-sm-12) отрабатывает при ширине 1023px (при 1024px в две колонки - .col-md-6).
Как сделать, чтобы 48em равнялось 768px и чтобы срабатывало в таких пропорциях?

col-xs-* - phones, up to 480px
col-sm-* - tablets, 768px and up
col-md-* - desktops, 992px and up
col-lg-* - large desktops, 1200px and up

Большое спасибо за ответ!

Comments

[Иван Дрожжин]

Может просто в пикселях задать? Если не секрет, а в чем фишка использования em в данном случае? Они же для шрифтов предназначены на сколько мне известно

[Алексей Демин]

Еслиб я знал )
В итоге переделал своими тегами и все заработало )

Answer 1

[Сергей Горячев]

За использование bootstrap и flexboxgrid я бы лично расстреливал на месте.
Особенно, когда приходится за кем-то разбирать каракули типа

<div class="col-xs-12 col-sm-12 col-md-6 cal-lg-6"></div>

Написать список своих media запросов ровно 5 минут времени. Также как и написать свою сетку.

Comments

[Алексей Демин]

Да, попутал лукавый. Переписал стили без фреймворка. Но почему-то на реальных телефонах не срабатывает.
мышкой меняешь браузер - все ок, тут ami.responsivedesign.is/?url=http%3A%2F%2Fdubai.je... все ок, а с реального телефона и в хорме i.imgur.com/gAH1epx.png не срабатывает
:(

[Сергей Горячев]

В head добавить, чувствую нет его у вас.

<meta name="viewport" content="width=device-width; initial-scale=1, maximum-scale=1, user-scalable=0">

[Сергей Горячев]

Алексей Демин: А хотя хрен его знает. У меня в Хроме тоже мобильная версия некорректно работает, даже с правильными метами. Я в Firefox Developer Edition работаю, там всё корректно. В мобильнике тоже. А в Хроме почему-то нет)))

[Сергей Горячев]

Алексей Демин: Не скажу вам, почему с Хромом беда. Вот что тесты мои говорят:
1. Мозилла - https://yadi.sk/i/MbkY633DjyivM
2. Хром - https://yadi.sk/i/Wwx3K9w2jyivj
3. Реальный айфон - https://yadi.sk/i/ob0yJbxojyiwc
Скорей всего ошибка в настройках, но это уже отдельная тема.
В вашем случае, если в мобиле не правильно, скорей всего нет мета тега.
А с хромом не скажу)

[Алексей Демин]

Sergey Goryachev: Сергей, большое спасибо! все заработало )