Ваш любимый сайт новостей краткие-новости.рф в восторге от вашего предыдущего предложения по изменению верстки сайта. И сейчас они предлагают продолжить работу над вторым проектом компании — детальные-новости.рф. Нужно сделать сайт максимально удобным для чтения с любого устройства. Сейчас сайт выглядит так:
Нужно изменить верстку, используя для указания размеров относительные единицы rem, чтобы размер шрифта и отступов адаптировался к размеру экрана.
-
Если вы выполняете задание в песочнице CodePen, в начале работы добавьте в тег
<head>следующий метатег<meta name="viewport" content="width=device-width, initial-scale=1.0">. -
Для устройств с шириной экрана больше
767pxрассчитайте размер шрифта элементаhtmlв процентах так, чтобы получилось10pxпри стандартных настройках браузера. -
Рассчитайте размер шрифта элемента
h1в единицахrem. -
Рассчитайте размер шрифта элемента
h2в единицахrem. -
Рассчитайте
margin-topиmargin-bottomэлементаh2в единицахrem. -
Рассчитайте размер шрифта элемента
pв единицахrem. -
Рассчитайте
margin-bottomэлементаpв единицахrem. -
Для устройств с шириной экрана меньше
768pxрассчитайте размер шрифта элементаhtmlв процентах так, чтобы размер шрифта элементаh1получился24px.Сначала следует посчитать необходимый размер шрифта элементаhtmlв пикселях, используя полученное в третьем пункте значение в единицахrem. Далее, зная размер шрифта вpx, можно рассчитать размер шрифта элементаhtmlв процентах при стандартных настройках браузера. -
Протестируйте результат в эмуляторе, выбрав iPhone 4. Если вы сделали все правильно, то размер шрифта элемента
h2должен быть20px, аmargin-topиmargin-bottom—24pxи16pxсоответственно:
Внесите изменения во вкладке CSS. Перед началом работы сделайте форк пена.