Подгон сайта под все устройства.

Crank174RuS
Сообщения: 66
Зарегистрирован: 19 сен 2010
Всем привет.
Как сделать так чтобы сайт мог везде отображаться полностью? и на компьютере и на телефоне
Пример:
[ссылки больше не доступны]

-- добавлено 14 янв 2014, 15:54 --

У вас сайт тоже на мобильных устройствах отлично отображается)

Аватара пользователя
Distructor
Администратор
Сообщения: 1600
Зарегистрирован: 28 дек 2009
верстать отзывчивый дизайн (responsive design)
попробуй менять ширину окна браузера на компе и увидишь, что размер и компоновка блоков меняются

достигается за счет набора css-стилей, из которых выбирается нужный под текущее разрешение на основе правил описанных в "@media". В примере ниже на месте многоточий стоят обычные css-стили

Код: Выделить всё

/* WIDE DESKTOP LAYOUT */
@media only screen and (min-width: 1176px) {
   ...
}

/* TABLET LAYOUT */
@media only screen and (min-width: 768px) and (max-width: 991px) {
   ...
}

/* MOBILE LAYOUT (PORTRAIT/320PX) */
@media only screen and (max-width: 767px) {
   ...
}

/* WIDE MOBILE LAYOUT (LANDSCAPE/480PX) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
   ...
}

/* RETINA OVERRIDES */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
   ...
}

Аватара пользователя
Assasin
Сообщения: 103
Зарегистрирован: 17 фев 2011
отзывчивый дизайн. хм. может адаптивная верстка?)

Аватара пользователя
Distructor
Администратор
Сообщения: 1600
Зарегистрирован: 28 дек 2009
ru.wikipedia.org/wiki/Адаптивный_веб-дизайн

В результате среди веб-дизайнеров стали понимать адаптивный дизайн (англ. adaptive design, не путать с англ. adaptive layout) как более широкое понятие, включающее отзывчивый дизайн (в качестве одной из реализаций адаптивности) и постепенное улучшение


в отзывчивом дизайне
    - применение гибкого макета на основе сетки (англ. flexible, grid-based layout);
    - использование гибких изображений (англ. flexible images);
    - работа с медиа-запросами (англ. media queries);
в дополнение к этому в адаптивном дизайне
    - применение постепенного улучшения;
    - проектирование для мобильных устройств с самых ранних этапов


Вернуться в «Ищу стиль/скрипт»