Как реализовать дизайн, подобный Тостеру?

Question

[des1roer]

Каким способом реализуется подобная гибкость? Сжимаем окно - пропадают колонки слева и справа?
Объясните, пожалуйста. Желательно на пальцах.

Answer 1

[Ilya Suhodolskiy]

Адаптивный и мобильный дизайн с CSS3 Media Queries

Comments

[des1roer]

кст ваш пример не раскрывает как они плюсик вверх засунули

[Ilya Suhodolskiy]

Как раз раскрывает, если вы внимательно прочитали пост на habr. "Плюс" на тостере сразу скрыт (display: none;) , а при нужном разрешении он появляется.

Пример:

display: none;

media screen and (max-width: 980px) {
.plus{display: block;}
}

[des1roer]

ой. мельком взглянул. видать не увидел

[des1roer]

кст zzfilms.ru/news/chernye_parusa/2015-03-16-7 на подобном сверстан?

[Ilya Suhodolskiy]

des1roer: Да

Answer 2

[Vlad Timofeev]

Главное - не забыть про

<!--[if lt IE 9]>
           <h1>Ваш браузер д**мо, извините.</h1>
           <small> С уважением, администрация. </small>
    <![endif]-->

Comments

[Ilya Korablev]

"Ь" забыли

[des1roer]

ну по сути плюс-минус адаптивность yii и для ie 9 обеспечивает

[Vlad Timofeev]

des1roer: не все на пхп кодят)

Answer 3

[Ilya Korablev]

Со смайликами вам надо в другое место.

Адаптивный дизайн.

Answer 4

[Misha7]

Легче всего на bootstrap сделать. mybootstrap.ru я сам до этого подобными фреймворками не занимался. Но потом резко поменял своё отношение к ним. В разы быстрее работа идёт. Но лучше канечно разобраться в адаптивной верстке, прежде чем кидаться к bootstrap.

Comments

[des1roer]

в разрезе yii есть blueprint css framework - это что то подобное?

[Misha7]

Ну да, особо в этот css фреймворк не вникал, но помоему он адаптивный. Изучайте, в интернете полно уроков
m.habrahabr.ru/post/24011