как преобразовать этот сайт в мобильный сайт или сделать его ликвидным?

Question

Мне интересно, есть ли способ конвертировать статические страницы в страницы мобильных телефонов.Под мобильными страницами я подразумеваю возможность перетаскивать содержимое рабочего стола до меньшего размера окна (например, размер смартфона: 320 пикселей).Сделать так, чтобы содержимое соответствовало размеру окна?Как мне нужно изменить CSS?как мне сделать математику?спасибо ... я полагаю, что должны быть фреймворки или инструменты, чтобы сделать это возможным?

Pls, некоторые руководства и мысли будут более чем приветствоваться.

Проверьте мой этот статический пример

спасибо за ваше время!Y /

Answer 1

Вы можете использовать Медиа-запросы . Для получения дополнительной информации, пожалуйста, обратитесь к Отзывчивый веб-дизайн: что это такое и как его использовать .

Моя рекомендация заключается в том, что вы сначала разрабатываете сайт, ничего не позиционируя. Просто разберитесь с этим и определите типографику, цвета и т. Д. (Например, design.css).

Затем используйте медиазапросы, чтобы начать правильное позиционирование. Для области просмотра шириной не менее 960 пикселей (то есть: design-960.css) это будет выглядеть так:

@media only screen and (min-width: 960px)
{
    // [...]
}

Для области просмотра шириной не более 359 пикселей (т.е. design-240.css) это будет выглядеть так:

@media only screen and (max-width: 359px)
{
    // [...]
}

И так далее. Вам понадобится следующий код, чтобы он отображался на мобильных устройствах в нужном масштабе:

<meta name="viewport" content="width=device-width; initial-scale=1"/>

Answer 2

@ Йони; вы можете использовать mediaqueries для определения вашего css в этом медиазапросе

но определите <meta name="viewport" content="width=device-width" /> на своей html-странице

есть и другая ссылка http://css -tricks.com / 6206-специфичные для разрешения таблицы стилей / , http://webdesign.about.com/od/css3/a/css3-media-queries.htm