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

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

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

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

Аватара пользователя
Distructor
Администратор
Сообщения: 1606
Зарегистрирован: 28.12.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
Сообщения: 105
Зарегистрирован: 17.02.2011
отзывчивый дизайн. хм. может адаптивная верстка?)
< ̄`ヽ、       /  ̄ >
 ゝ、  \ /⌒ヽ,ノ   /´
   ゝ、 ( ( ͡◉ ͜> ͡◉) /
     >     ,ノ
  ℧   ∠_,,,/´
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Аватара пользователя
Distructor
Администратор
Сообщения: 1606
Зарегистрирован: 28.12.2009
ru.wikipedia.org/wiki/Адаптивный_веб-дизайн
В результате среди веб-дизайнеров стали понимать адаптивный дизайн (англ. adaptive design, не путать с англ. adaptive layout) как более широкое понятие, включающее отзывчивый дизайн (в качестве одной из реализаций адаптивности) и постепенное улучшение
в отзывчивом дизайне
  • - применение гибкого макета на основе сетки (англ. flexible, grid-based layout);
    - использование гибких изображений (англ. flexible images);
    - работа с медиа-запросами (англ. media queries);
в дополнение к этому в адаптивном дизайне
  • - применение постепенного улучшения;
    - проектирование для мобильных устройств с самых ранних этапов

Ответить