Один з найбільш заплутаних моментів в CSS це застосування властивості font-size для масштабування тексту. У CSS ви маєте чотири основні одиниці виміру, за допомогою яких ви можете регулювати розмір тексту. Яка з цих чотирьох одиниць найкращим чином підходить для інтернету? Це питання породив цілий шквал міркувань і суперечок. Остаточно відповісти на це питання вкрай важко, тому що саме питання не з простих.
Знайомство з одиницями вимірювання CSS
Отже, в чому відмінності?
Різницю між одиницями вимірами найпростіше зрозуміти на прикладах. Загалом, 1em = 12pt = 16px = 100%. Але що буде, якщо ми збільшимо базовий розмір шрифту, наприклад, у тега body виставимо font-size: 120%.
Як ви можете бачити вище, зі збільшенням базового розміру шрифту, шрифт в em і відсотках також збільшився, але шрифт на основі пікселів і пунктів не збільшився. Звичайно, можна легко встановити абсолютний розмір для вашого тексту, але для відвідувачів буде краще, якщо ви використовуєте масштабовані текст, який буде адекватно відображено на будь-якому пристрої. З цієї причини em і відсотки кращі для вебу.
Em vs. відсотки
Ми з'ясували, що одиниці пікселі і пункти не найкраще рішення для інтернету, отже, ми залишилися з відсотками і em. У теорії і em і пікселі ідентичні, але на практиці, вони мають кілька невеликих відмінностей, які необхідно враховувати.
Наприклад, з прикладу вище, ми використовуємо відсотки для базового розміру шрифту (тег body). Якщо ви змінити базову одиницю виміру основного шрифту (відсотки) на em (тобто body
Коли в браузері розмір тексту встановлений на 'medium', ви не помітите різницю між em і відсотками. Однак, якщо ви поміняєте настройки, різниця стане помітною. Наприклад, при 'Smallest', em істотно менше відсотків, а коли 'Largest', все навпаки, em стають більше відсотків. Хоча багато хто може стверджувати, що em масштабируются так як потрібно, на практиці em масштабується занадто різко, а при невеликому розмірі стає нерозбірливим на деяких екранах.
У теорії, одиниці виміру em і відсотки оптимальний стандарт для Інтернету, але на практиці, відсотки більш дружні до користувачів. Коли користувач змінює текстові настройки в браузері, відсотки масштабируются в браузері більш розумно, дозволяючи дизайнерам зберегти Новомосковскемость, доступність і візуальний дизайн.