Авто разрешение сайта

Сообщений: 77

Репутация: 11

Сообщение # 1 | 01:42:30 16 Авг 2014

Пытался сделать автоматическую подстройку сайта под разные разрешения экранов, но что-то не получилось. Пробывал через таблицу стилей.
Может кто подскажет как это воплотить в реальность ?

Lumore

Сообщений: 211

Репутация: 18

Сообщение # 2 | 02:42:52 16 Авг 2014

@media only screen and (max-width: 1050px) {} - Внутрь пишите что хотите изменить под разрешение 1050px.

Пример:

Код

#aside {
text-align: left;
}
@media only screen and (max-width: 1050px) { #aside {text-align: center} }
@media only screen and (max-width: 850px) { #aside {text-align: right} }

Объяснение: Есть id "aside", текст выравнивается по левому краю. С разрешением 1050px текст будет выравниваться по центру, а с разрешением 850 будет выравниваться по по правому краю.

Думаю вы поняли.

Modelist2608

Сообщений: 77

Репутация: 11

Сообщение # 3 | 18:30:14 16 Авг 2014

А именно вносить в CSS ? А куда именно в /*GEneral Stily*/ или в другое место ?

Lumore

Сообщений: 211

Репутация: 18

Сообщение # 4 | 18:42:45 16 Авг 2014

Modelist2608, да в CSS, в любое место

VelFaramey

Сообщений: 24

Репутация: 39

Сообщение # 5 | 11:48:12 23 Авг 2014

Немного полезной информации вдогонку — https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries (eng)

Работающие примеры сайтов использующие медиа-запросы — http://mediaqueri.es

— InMineCraft.ru

МАА

Сообщений: 470

Репутация: 64

Сообщение # 6 | 10:51:36 01 Окт 2014

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

Любовь-это...

VelFaramey

Сообщений: 24

Репутация: 39

Сообщение # 7 | 17:06:58 02 Окт 2014

МАА, вам нужно изначально понять суть того, как работают эти меда-запросы и отталкиваться от того, какую структуру имеет сайт. Поменяв один лишь параметр вряд ли получиться добиться полной адаптивности.

Советую посмотреть и поковырять живой пример http://rwdgrid.com/demo или темплейты бутстрапа.

— InMineCraft.ru

Страница 1 из 1 1
Модератор форума: o_Lisovenko, JonMagon