Методы, позволяющие сделать макет совместимым с изменением размера окна и шрифта - PullRequest
Новая
       7

Методы, позволяющие сделать макет совместимым с изменением размера окна и шрифта

0 голосов
/ 12 сентября 2009

Существует ли хорошее руководство / руководство по передовому опыту и т. Д., В котором изложены методы для создания разметки страницы следующими двумя способами:

a) Макет должен быть устойчивым при изменении размера окна

b) Макет должен плавно обрабатывать изменения размера шрифта, принятые пользователем

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

  • обработка тела onresize ()
  • объявление всех значений в% (это застревает, когда размеры изображения должны быть определены в px)
  • поместив div в -10 000 px и опрашивая его с интервалами для проверки изменения размера шрифта (задыхаясь!)

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

Ответы [ 3 ]

2 голосов
/ 12 сентября 2009

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

Таким образом, обычным подходом было бы, скажем, абсолютное позиционирование боковой панели фиксированной ширины справа и присвоение основному тексту текста поля справа, равного этой ширине. Существует множество способов достижения такого рода макетов - см. Бесконечные публикации о «жидких CSS-столбцах».

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

2 голосов
/ 12 сентября 2009

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

1 голос
/ 12 сентября 2009

Если вы ищете более конкретные решения для разметки, я бы сказал, что в наши дни обычной практикой является использование предварительно созданной разметки сетки. Существуют фиксированная ширина и текучие версии , обе из которых увеличиваются в зависимости от размера шрифта пользователя. У YUI тоже есть. Нет JS, нет материала за кадром.

Но я также вижу ссылку на то, как пользователь масштабирует текст из своего браузера. Это не та проблема, которая была раньше. Раньше вам приходилось быть довольно осторожным - если вы поместите текст в%, он будет масштабироваться, но в некоторых браузерах px не будет. Теперь все браузеры увеличивают масштаб страницы в целом, включая текст и изображения, пропорционально друг другу. Корректировка размера текста действительно похожа на увеличение масштаба страницы, так как изображения растут. Вы можете просто измерить ширину текста и столбцов в пикселях (или в%, или в pt, или в любом другом месте) в режиме «полный размер», и браузеры будут хорошо настраиваться.

...