Всем привет.
Как сделать так чтобы сайт мог везде отображаться полностью? и на компьютере и на телефоне
Пример:
[ссылки больше не доступны]
-- добавлено 14 янв 2014, 15:54 --
У вас сайт тоже на мобильных устройствах отлично отображается)
Подгон сайта под все устройства.
- Distructor
- Администратор
- Сообщения: 1607
- Зарегистрирован: 28.12.2009
верстать отзывчивый дизайн (responsive design)
попробуй менять ширину окна браузера на компе и увидишь, что размер и компоновка блоков меняются
достигается за счет набора css-стилей, из которых выбирается нужный под текущее разрешение на основе правил описанных в "@media". В примере ниже на месте многоточий стоят обычные css-стили
попробуй менять ширину окна браузера на компе и увидишь, что размер и компоновка блоков меняются
достигается за счет набора 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) {
...
}
- Distructor
- Администратор
- Сообщения: 1607
- Зарегистрирован: 28.12.2009
ru.wikipedia.org/wiki/Адаптивный_веб-дизайн
В результате среди веб-дизайнеров стали понимать адаптивный дизайн (англ. adaptive design, не путать с англ. adaptive layout) как более широкое понятие, включающее отзывчивый дизайн (в качестве одной из реализаций адаптивности) и постепенное улучшение
в отзывчивом дизайнев дополнение к этому в адаптивном дизайне
- - применение гибкого макета на основе сетки (англ. flexible, grid-based layout);
- использование гибких изображений (англ. flexible images);
- работа с медиа-запросами (англ. media queries);
- - применение постепенного улучшения;
- проектирование для мобильных устройств с самых ранних этапов