Вёрстка, адаптирующаяся под размер экрана

[PavelTkachev]

Некоторое представление о вёрстке я имею, но знаний для решения поставленной задачи не хватает. Поэтому прошу помощи в указании направления обучения.

 

Нужно сверстать сайт, так чтобы он всегда занимал весь размер монитора. То есть все элементы интерфейса должны автаматически перемасштабироваться под соответствующую высоту и ширину экрана. Вёрстка в основном будет состоять из текстов и элементов html+css. Есть ли для них возможности задавать размеры с использованием формул без javascript?

 

Есть ли возможноти для картинок? Есть некоторое количество кнопок с графическими элементами. Решит ли проблему использование svg?

[PavelTkachev]

Прочитал, что иконки можно загрузить в шрифт. Тогда они будут масштабироваться. Как это делать?

[ryter]

Прочитал, что иконки можно загрузить в шрифт. Тогда они будут масштабироваться. Как это делать?

все очень просто используй em или rem для отступов и размеров а через медиа квери уменьшай размер шрифта и будет у тебя ресайз всего 

[PavelTkachev]

Я плохо сформулировал вопрос. Как внедрить иконку в шрифт? И лучше ли это, чем svg?

 

Про всё остальное, я так понял, что мне нужно рыть в направление Responsive web design

[ryter]

есть готовые шрифты http://fortawesome.github.io/Font-Awesome/

[PavelTkachev]

Спасибо!

А можно ли масштабировать картики? Логотип, например.

[ryter]

можно все что угодно. тут уже зависит от поддержки 

[PavelTkachev]

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

 

Подскажите, что почитать про вёрстку картинок. Не переводить же их в кривые на лету. Можно, конечно загружать большие и масштабировать их с помощью HTML. Это правильный путь? Кажется странным передавать в мобильный несколько картинок шириной 600 пикселей и следовательно сумарным размером в мегабайт.

[Switch74]

через media можно указывать маленькие картинки для мобильной версии, при увеличении размеров можно менять картинки на большего размера. Изменение можно делать на лету с помощью php или хранить все версии картинок на сервере, у каждого способа свои + и -

[PavelTkachev]

Спасибо! Изучаю. А какие + и - обоих подходов Вы выделяете?

 

При использовании media браузер будет на лету менять стили при увеличении разрешения экрана?

 

И под какое минимальное разрешение делать сайт?

[Switch74]

PHP

оба способа

+ экономия трафика клиента и наш

+ не напрягаем клиентскую машину

 

на лету меняем размеры картинок, применяем фильтры, обрезаем и поворачиваем как надо:

+ экономия места на хостинге

- ресурсоемкие функции, отсюда: скорость отдачи картинок и требование больших ресурсов

 

держим все возможные варианты картинок

+ быстрая отдача картинок

- требуется много места под картинки

 

надеюсь более подробно описывать по каждому пункту не нужно?

 

Минимальное разрешение выбирать вам, если хотите чтобы сайт смотрели на экранах 300х100 или начиная хотя бы с 400х600 (размеры приблизительные и не реальные, просто для понимания)...

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

Edited March 18, 2014 by Switch74

[li4e]

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

 

Классика:  Итан Маркотт(Ethan Marcotte) Отзывчивый веб-дизайн, есть на русском из серии A book apart.
Очень доходчиво объясняет, прямо на примере. Около 300 страниц читается очень быстро.
В этой же серии можно просмотреть Люк Вроблевски "Сначала мобильные".

На рутрекере посмотрите A book apart

Там же посмотрите Responsive  design есть курсы от  Tutsplus.com и Lynda.com

 

Edited March 18, 2014 by li4e

[PavelTkachev]

Всем спасибо за ответы. Буду читать и пробовать и при необходимости задавать уже конкретные вопросы.

[maromaks]

для картинок используйте % и auto (что бы сохранить пропорции) а для текста можно и vw, vh

[PavelTkachev]

для картинок используйте % и auto (что бы сохранить пропорции) а для текста можно и vw, vh

 

Подскажите, пожалуйста, подробнее.