Вам необходимо скопировать ваш исходный CSS код и поместить его в поле <ИХОДНЫЙ CSS>. Воспользуйтесь любым способом работы с буфером обмена , например сочетанием клавиш: для копирования CSS <ctr>+<c>, и для вставки CSS <ctr>+<v>.
Онлайн конвертер CSS фиксированных значений в относительные
Применили
-
раз
проанализировано
----
свойств
5 шагов, как использовать
1 Скопировать исходный CSS
2 Указать входные значения
Введите значения ширины Viewport, для которого необходимо провести конвертацию в поле <ШИРИНА Viewport>.
Установите желаемую точность вычисления. Укажите сколько необходимо учитывать знаков после запятой в поле <ОКРУГЛЕНИЕ>.
3 Запустить конвертацию
Запустите конвертация, нажмите кнопку <КОНВЕРТИРОВАТЬ>.
Программа найдет все значения в коде CSS, указанные в фиксированном формате (px) и преобразует их в соответствии с вашими значениями в относительные (vw).
4 Применить дополнительный функционал
При необходимости, воспользуйтесь дополнительным функционалом.
При конвертации в исходном коде заменяются все значения px на vw, другие значения остаются без изменения. Если вам необходимо использовать преобразованный код CSS в рамках медиа запроса после основных стилей, то примените дополнительную опцию очистки кода. Она удалит из кода все незатронутые атрибуты и стили, тем самым устранит избыточность вашего кода.
5 Скопировать преобразованный CSS в свой проект
Нажмите кнопку <КОПИРОВАТЬ> и преобразованный код CSS скопируется в буфер обмена.
Вставьте код в необходимое вам место.
- Исходный CSS
- Преобразованный CSS
Выберите ширину экрана из популярных
320px
375px
400px
425px
480px
700px
768px
960px
1024px
1280px
1366px
1440px
1600px
1920px
2560px
3840px
Примеры медиа запросов в CSS:
@media (width > 430px) and (width < 1180px){...}
стили сработают при Viewport от 430px до 1180px
@media screen and (max-width: 680px){...}
стили сработают на устройствах с экраном при Viewport менее чем 680px
@media (hover:hover){...}
стили сработают только на устройствах с наведением указателя, т.е. для PC
@media (hover:none){...}
стили сработают только на устройствах без указателя, т.е. для мобильных устройств
@media (hover: none) and (pointer: coarse){...}
для смартфонов, устройств с сенсорными экранами, с которыми работают пальцами
@media (hover: none) and (pointer: fine){...}
для устройств с сенсорными экранами, с которыми работают стилусом
@media (hover: hover) and (pointer: fine){...}
мышь и тачпад
В исходном CSS обнаруженны вложенные элементы, такие как @media, @keyframes или другие.
Внимание!!! Возможно преаброзованный код содержит ошибки.
Для корректного конвертирования исключите из исходного CSS элементы с вложенносью.