Jump to content
  • 0

кто верстает rem-ами и главное ЗАЧЕМ?

Dioni$$

Asked by Dioni$$,

 Share

Question

Dioni$$ Explorer

Dioni$$

Posted
Posted

Всем привет народ. 

 

Один зак у меня считает что ремы это мегакруто и надо верстать только ими. У кого то еще требовали заки такое? Кто то вообще реально использует их? И в чем смысл кроме необходимости ставить точку? Только не надо мне про принцип работы. Мне реально пользу какую-нить практическую плиз. 

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
Great Rash Explorer

Great Rash

Posted
Posted

Практической пользы от них почти никакой. Это если верстать только используя rem. Если же верстать используя em, то без rem начинается много гемора с высчитыванием обратных процентов.

 

Приведу пример:

 

Допустим я верстаю адаптивный сайт (пусть это будет новостной сайт, где много текста), который должен работать на десктопах, планшетах и телефонах. На десктопах мне нужно чтобы шрифт у текста был 14px, на планшетах экран маленький. поэтому там шрифт надо увеличить до 18px. На телефонах мне надо ещё увеличить текст, допустим до 20px. Вот чтобы мне стопицот раз в media quieries не писать стили, в которых я хочу увеличить шрифт, и нужны em. В таком случае я смогу разот для <body> изменить размер шрифта и у меня все элементы на странице автоматом изменятся.

 

Но иногда бывают ситуации, что я внутри чилда. Допустим 1em = 10px, допустим текст в кнопке "далее" у меня 1.5em (т.е. 15px), а внутри есть <span>, для которого мне надо уменьшить шрифт до исходного. Но для этого спана 1em уже равен не 10px, а 15px, поэтому мне придётся высчитывать сколько же это будет в процентах (~0.67 если чо). И вот чтобы не геммороиться с высчитыванием как раз нужны rem. Т.е. код будет примерно таким:

<head>  <style>    body {      font-size: 10px; /* чтобы удобней было в em'ах считать (типа 1.4em = 14px) */    }    button {      font-size: 1.5em;    }        button span {      font-size: 1rem; /* фигак и я снова 10px */            /* font-size: 0.67em; а без rem я бы занимался подобными извращениями */    }  </style></head><body>  <button>    я текст<br />    <span>а я дополнительный текст</span>  </button></body>

Но верстать ТОЛЬКО на rem как-то бессмысленно.

  • Like 2
Link to comment
Share on other sites
  • 0
Dioni$$ Explorer

Dioni$$

Posted
  • Author
Posted
Great Rash  - спасибо. Единственный дельный камент. Остальным желаю умничать и торговать книгами где-нить в других местах. 

 

 Sergik+ - можно поподробнее. Compass юзаю - но как то не сталкивался с

 

инструменты для работы с

адаптивными шрифтами и вертикальным ритмом.

Link to comment
Share on other sites
  • 0
Sergik+ Explorer

Sergik+

Posted
Posted

Great Rash  - спасибо. Единственный дельный камент. Остальным желаю умничать и торговать книгами где-нить в других местах. 

 

 Sergik+ - можно поподробнее. Compass юзаю - но как то не сталкивался с

 

инструменты для работы с

адаптивными шрифтами и вертикальным ритмом.

 

Link to comment
Share on other sites
  • 0
Dioni$$ Explorer

Dioni$$

Posted
  • Author
Posted

спс за видео. познавательно. но это больше для случая когда пилишь свой проект. а когда дизайнер уже все нарисовал приходится просто подстраиваться так как к сожалению мало кто из дизайнеров наверное вообще знает о существовании вертикального ритма. и они просто выставляют свои отступы и самое ужасное они еще и не всегда одинаковы. конечно же это относится не ко всем и когда в руки попадает проф сделаный макет = то с ним работать легко и приятно.

 

ну и кстати я совершенно не понял как это заменяет сказанное Great Rash 
Дополняет да, но как раз по сути вопроса камент его как раз  в тему. 

В любом случае спасибо всем кто отозвался.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept