Как сделать адаптивный дизайн для портретного и ландшафтного режима без добавления / удаления / редактирования дизайна и CSS?

Question

Я разрабатываю сайт для настольных компьютеров и iPad.Один и тот же веб-сайт будет использоваться для iPad и настольных ПК.

Ширина дизайна сайта составляет 1024 пикселя, а в режиме iPad Portrait - 768 пикселей.Мои вопросы - это то, что я должен учитывать при создании дизайна и написании CSS, поэтому не нужно писать конкретные CSS для портретного режима

Я хочу создать гибкий макет для обеих ориентаций без использования медиазапросов.

Answer 1

Вам придется использовать относительную ширину для всего - подумайте проценты и их значения.

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

Самая большая проблема дизайна, на мой взгляд, будет в том, как сайт выглядит на 768px в ширину против 1024px в ширину; слишком длинные линии? Как изображения будут растягиваться / сжиматься? Будет ли размер шрифта в 768 пикселей читаться в 1024?

Answer 2

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