Какой блок CSS лучше всего сделать, чтобы веб-страница выглядела хорошо даже после увеличения?

Question

Моя страница выглядит хорошо без увеличения. но когда я увеличиваю в Firefox и в IE, это выглядит некрасиво, потому что часть содержимого переносится на следующую строку.

Я думаю, что проблема в единице, которую я использую. Я использую пиксели для установки ширины.

Какие единицы я должен использовать, чтобы предотвратить уродливый вид страниц при масштабировании? Пожалуйста, помогите

Answer 1

Как правило, использование em и процентов является хорошим выбором, поскольку они являются относительными, а не определенными пикселями. Если вы установите значение 4em в ширину (угадывание правильных цифр - забавная игра - начните с 10px = 1em и переходите оттуда), тогда при увеличении / изменении размера текста поле остается примерно того же размера относительно текст.

Для справки стоит упомянуть, что EM относится к размеру шрифта его родителя. Таким образом, размер 1em на 100% совпадает с размером шрифта. Как упомянуто в другом ответе, слишком много раз вложение их вызывает каскад.

Также может быть интересно, когда вы говорите о масштабировании, вы имеете в виду изменение размера шрифта. Масштабирование не должно влиять на макет, тогда как создание текста будет. (Я, как правило, пользователь Chrome и далеко от компьютера, так что не могу быть уверен в IE и FF).

Answer 2

В современных браузерах есть два разных метода масштабирования: масштабирование шрифта и увеличение. Второй не проблема, но первый. Потому что там увеличен / уменьшен только размер шрифта, но не весь вид.

Таким образом, вы должны использовать макет, который использует размер шрифта в качестве основы. Большинство браузеров имеют размер шрифта по умолчанию 16 пикселей. Вы можете использовать это и получить практически любое значение пикселя, которое вы хотите, умножив на соответствующий коэффициент.

Если вы, например, хотите, чтобы ширина основного столбца составляла 800 пикселей, используйте width:50em (50 · 16 = 800 или 800/16 = 50).

Answer 3

Если вы хотите увеличить все (контейнеры и шрифты), вы можете использовать em. Остерегайтесь, хотя это, как известно, трудно поддерживать. Если вы измените один родительский размер, то будут затронуты все дочерние размеры.

Это можно частично решить, избегая как можно больше вложенных тегов. Конечно, в большинстве случаев это неизбежно, но не углубляйтесь, если вам не нужно.

Answer 4

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

Примеры, где относительные единицы усложняют жизнь:

• заголовки в стиле изображения
• каталог продукции с картинками
• длина конкатенации относительно окна браузера

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

В настоящее время основные браузеры знают, как увеличить (отличается от «увеличения») контент со всеми его элементами, даже если они определены в пикселях. Полный пиксельный дизайн также хорош, если вы следуете некоторым правилам для интервальных элементов (основанных на размере шрифта). И это работает на большинстве мобильных браузеров.

Я уже вижу армию фиксированного размера, загружающую свое оружие. Это только мой опыт. Я также люблю проекты относительного размера, но в некоторых проектах их было просто невозможно применить без уловок трюков.

Короче: сделать все фиксированным или относительным, но выбрать.