Использование em вместо pt

Question

Я читал Рекомендации по доступу к веб-контенту 1.0 (с. 3.4, стр. 13), где говорится использовать em, а не pt.

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

Answer 1

Рекомендую прочитать Итан Маркотт Отзывчивый веб-дизайн . Он рассказывает о методике не указывать высоту / ширину в тегах img, а вместо этого устанавливает max-width на 100%:

img {
   max-width: 100%;
}

Фактически, это будет работать для любых элементов фиксированной ширины, таких как видео / flash и т. Д.

IE6 и ниже не поддерживают максимальную ширину должным образом, поэтому вы можете установить width: 100%; вместо этого, что является основным обходным путем.

В книге также объясняется, как использовать AlphaImageLoader для улучшения масштабирования изображения в IE7 и ниже.

Answer 2

Обычно не имеет смысла указывать размеры изображения в em.Это ничего не улучшит и сделает изображение размытым.Используйте em только для текста, и пусть изображения будут сохранены в их исходном размере.Кроме того, вы можете использовать IMG {max-width: 100%}, если не хотите, чтобы изображения переполняли свой контейнер при узких размерах окна браузера.

Answer 3

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

В разделе под названием "Информация ", есть еще больше , чтобы посмотреть.

Похоже, вам просто нужно продолжать играть с числом после десятичной запятой, и эти F5 мышцы растягиваются и разминаются.;)