В 2006 году большинство пользователей имело экран монитора 800*600. Но время неумолимо и в какой-то момент "нормальным" стал 1024*768. У веб-ресурсов, ориентированных на меньшее разрешение, появилось пустое пространство по бокам. Всё большую популярность стали приобретать "резиновые" сайты, которые создаются путём использования
- @Media,
- относительных величин.
@Media CSS
Для того, чтобы адаптировать дизайн web-проекта под разные устройства (мобильные телефоны, планшетники, принтеры и т.п.) применяется @Media. Из всего многообразия types и Queries, как правило, внедряют print и width. Рассмотрим последний. Он влияет на отображение сайта в окне браузера разной ширины. Поэтому для того, чтобы увидеть его в действии, достаточно уменьшить размеры окна браузера 
.
Попробуйте это сделать прямо сейчас. И вы увидите как боковая панель данного блога распадается (поиск перемещается вниз, содержание переходит в тело статьи), в меню сокращаются списки, убирается надпись "Дата обновления" и т.д.
Макет с изначальными значениями блоков указан здесь. Добавим правила перед тегом </style>
@media (max-width: 930px) { /* это будет показано при разрешении монитора до 930 пикселей */
.content-wrapper {padding: 0;} /* основное содержимое занимает всё пространство окна */
}
@media (max-width: 930px) and (min-width: 470px) { /* для разрешения экрана от 470 до 930 пикселей */
aside {position: static; width: 100%; background: #ccc;} /* боковая колонка смещается согласно расположению в HTML и меняет фон */
}
@media (max-width: 469px) { /* если максимальное разрешение экрана составит 469 пикселей */
body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;} /* меняется шрифт */
aside {display: none;} /* боковая колонка исчезает */
}
Вместо px лучше использовать em. Для чего значение px нужно разделить на значение font-size в px. Например, 1600/16=100, а именно media='(min-width: 100em)'.
CSS стили можно как непосредственно добавить в код страницы, так и воспользоваться внешним файлом, например:
<link rel='stylesheet' href='URL_по_умолчанию.css' /> <link rel='stylesheet' media='(min-width: 1600px)' href='URL_большой.css' /> <link rel='stylesheet' media='(max-width: 1599px) and (min-width: 800px)' href='URL_средний.css' /> <link rel='stylesheet' media='(max-width: 799px)' href='URL_маленький_экран.css' />
Размещение экрана как "пейзаж" (ширина больше высоты) и "портрет" (ширина меньше высоты)
@media all and (orientation:landscape) {
/* стили для пейзажа */
}
@media all and (orientation:portrait) {
/* стили для портрета */
}
или
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
104 комментария:
Это действительно полезная статья!
Только вот как-то привык что ли к стандартной ширине блога, или просто лень заниматься (а чесно говоря надо!!! :) )
Спасибо за информацию, Наталия, как только руки дойдут, так сразу и возьмемся!!
Вам - букетик ромашек и еще одно спасибо!!
Бывает опечатываюсь. Двойка мне!
Единственное, что произошло - исчез фон. Вот и всё. В чём прикол-то?
Из минусов я вижу трудоёмкость метода.
Лично я на этом блоге совмещаю оба (резиновый и @ Media). В целом шаблону заданы максимальная и минимальная ширина. Но для страниц типа http://shpargalkablog.ru/2010/07/razrabotka-bloga-v-blogger.html нужно задавать фиксированную ширину, чтобы убрать боковую колонку. Поэтому для них я применяю @ Media.
Например, здесь вы пишите об "Изначальных размерах блоков"..., а для какого шаблона?
1.Предлагаю написать статью с "разбором" и объяснением конкретного нового шаблона (готов помогать, поскольку сижу и тыкаю файрбагом в "simple template", дабы сделать его резиновым)).
2. Открыть для всех читателей блога один аккаунт закладок, по этой статье я бы сделал такую закладку "Как сделать "резиновый" шаблон у блогов на платформе Blogger в статье о @ Media"
Думаю, что многие читатели добавит свои закладки на эту же статью, но отметят совершенно другие вопросы.
А вам останется лишь организовать RSS-трансляцию с этого аккаунта на поля этого блога... и будет для нас справочник howto... и блог слегка продвинем.
И о продвижении, ...понятное дело, что вы здесь пишите "для себя", а не для рекламы..., но именно такие блоги и надо двигать. Если вы напишите пост о пользе ссылок с сервисов закладок, с рекомендациями, то мы все будем открывать аккаунты и ссылаться на страницы этого блога.
@ Media я использую, если нет альтернативного варианта с max-width и min-width. Например, меню сверху на данном блоге слишком широкое и на экранах с маленьким разрешением показывается в два слоя, что некрасиво. В IE можно посмотреть. Поэтому для меньших экранов монитора я уменьшаю размер букв, что выглядит следующим образом:
@media (max-width: 1050px){#menu {font-size: 100%; padding: 10px 3px 5px 3px;}}
@media (max-width: 1070px) and (min-width: 1050px) {#menu {font-size:110%;}}
@media (max-width: 1135px) and (min-width: 1070px) {#menu {font-size:120%;}}
Уменьшите размеры окна браузера Мозилы для демонстрации. Мне нравится, что можно регулировать такие мелочи.
Не думаю, что большая часть читателей будет применять @ Media. Только малая часть из них.
Покажите пример с аккаунтом в соц. закладках. Сейчас тренд сезона - социальные сервисы. Закладки ушли на задний план. Остались закладки от Яндекса и Гугл, но они не для широкой общественности.
padding-left: 25px;
padding-right: 25px;
max-width: 99%;
}
Значения на своё усмотрение.
ну перед стайл ]]> а куда следующие коды вставлять непонятно немного
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
внесите
body {
padding-left: 20px;
padding-right: 20px;
}
html body .content-outer {
max-width: 100%;
}
/* Content
----------------------------------------------- */
После неё будет код, указанный в комментарии 35. Добавляйте часть, которая следует после слова "внесите". "Внесите" не должно быть в коде.
я просто код не проглядел)
эмм..та че то неоч то изменения проглядываются
Есть шаблон размером 1734рх он отображается не весь на экране (и само сабой чем больше экран и разрешение, то видно больше сайта).
Верстальшик сказал, что нужно переделывать шаблон. Но есть ведь настройки CSS для того, что бы он принимал разную ширину на разных разрешениях.
Как это можно сделать? Или реально придется переделывать шаблон?!
опять взялся за эту ошибку, уже и посетители жаловаться стали :)
что то ошибку выдает на этапе http://cs405529.vk.me/v405529514/69b5/PFAc3bvn8DQ.jpg
теперь вообще ничего не понял...
Вы добавляете сюда http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html#css
Прочитал очень много статей по этой теме, но вот с практикой какая-то беда на данный момент.
Посмотрите, пожалуйста: http://www.kuvschinnikov.ru/.
Заранее огромное спасибо!
min-width: 1000px;
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 1000px;
max-width: 1000px;
_width: 1000px;
}
замените на
body {
max-width: 1000px;
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
max-width: 1000px;
}
Это должно сделать шаблон "резиновым". Далее нужно в шаблоне все текстовые элементы перевести в %. Например, заголовок h, тег p и т.п. Для фонового изображения прописать
background-size: 100% 100%;
Могу сказать, что будет не просто.
Вопрос: "резиновый" сайт и адаптивный веб-дизайн - понятия разные или одно и тоже?
Посмотрел исходники некоторых сайтов с RWD, шрифты у них прописаны в px, а вот ширина в процентах.
Еще один вопросик в #header-inner "вставлено" изображение. Как сделать, чтобы став "резиновым", оно не потеряло своего качества?
Буду Вам очень признателен за помощь или, хотя бы, за совет в какой направлении трудиться.
P.S.: мой блог полностью построен на основе Ваших статей! Спасибо Вам!:-)
<style>
body {
margin: 0;
}
#content-wrapper {
max-width: 1000px;
}
</style>
<body>
<header></header>
<div id='content-wrapper'></div>
<footer></footer>
</body>
По поводу фона: берёте в самом хорошем качестве и см. http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html#size
Один знающий человек порекомендовал мне прописать min-width. Я сделал так, как Вы мне написали - меню и футер становятся в 1000px.
Перепробовал все...
Эта единственная проблема на данный момент...
body {
min-width: 1000px;
}
Это значит, что и на мониторах, и на мобильниках сайт будет занимать 1000px. А нам нужно: на мониторах - 1000px, на мобильных - 400px.
У вас судя по всему
.content-outer, .content-fauxcolumn-outer, .region-inner {}
Я же приводила общий пример.
Вопрос по поводу того, как сделать адаптивными изображения находящиеся в постах, а также миниатюры на большие картинки, при клике на которые срабатывает стандартный Lightbox. Где прописывать стиль? Общий или для каждого отдельно?
Еще хотелось бы узнать ваше мнение, касаемо данного сервиса, облегчающего создание "адаптивного" шаблона. Вот еще обзорная статья.
Заранее благодарен, Наталья!
Для стандартного Lightbox тоже вроде (где-то видела с белым фоном) править можно стили CSS.
По-поводу сервиса ничего сказать не могу, попробуйте, не зря же их разрабатывают. )
Скажите, пожалуйста, а как сделать ссылку, как у Вас - "зафиксировать панель"? Принцип ее фиксации знаю, интересно просто как работает сама ссылка.
И еще один, может быть, глупый вопрос - как избавиться от CSS-стилей, тянущихся с гугловских, сторонних документов, где прописано буквально все? Просто, я сейчас работаю с шаблоном, переписываю все стили под себя, начинаю просматривать, а изменений никаких, смотрю исходники - стили с внешнего документа "работают". Например, меню: добавляю HTML, оформляю все, как надо (не добавляю виджет меню), но все перекрывает селектор .widget ul, ... li и т.д.
Аналогично, к примеру еще, #blog-page...
Я когда делала свой шаблон, снесла все стили и в качестве основы использовала это https://sites.google.com/site/spargalka1/rating/minima.xml?attredirects=0&d=1
Но можно пойти более лёгким путём. Прописывать, например для меню,
.tabs-inner {}
со своими данными. Или вместо класса меню присваивать id - он приоритетный
body {
min-width: 1000px;
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 1000px;
max-width: 1000px;
_width: 1000px;
}
на max-width: 1000px, так как почитал все Ваши комментарии, там Вы рекомендуете вставить другой код (body {
padding-left: 20px; padding-right: 20px;}
html body .content-outer {max-width: 100%;}) в раздел /* Content */, плюс ко всему всем основным разделам я прописал максимальную ширину.
Скажите, я правильно сделал?
Касаемо структуры шаблона: работать нужно с рамками блоков, такими как, например, content-outer, column-center-outer, column-left-outer и т.д.?
Я вот именно что присваивал id-шник!
В Blogger довольно много вложенных div, которые не всегда нужны. Код старается предусмотреть все возможные случаи. Работать нужно с теми селекторами, которые решают вашу задачу. Я смотрю через Mozilla Firefox, правая кнопка - "Исследовать элемент".
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
заменить на
<h4><data:post.commentLabelFull/>:</h4>
.content-wrapper {padding: 0;} /* основное содержимое занимает всё пространство окна */
}
@media (max-width: 930px) and (min-width: 470px) { /* для разрешения экрана от 470 до 930 пикселей */
aside {position: static; width: 100%; background: #ccc;} /* боковая колонка смещается согласно расположению в HTML и меняет фон */
}
@media (max-width: 469px) { /* если максимальное разрешение экрана составит 469 пикселей */
body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;} /* меняется шрифт */
aside {display: none;} /* боковая колонка исчезает */
}
не работает ! сайт на joomla шарю очень мало !(((
Вопрос если позволите. Не совсем понял как, куда вставлять, почитал комментарии Вы так пытались всем объяснит, но всё равно не понял толком. Ну с линком ясно, как и при простом способе (когда один стиль) просто внешний файл со стилями. Ну да ладно. Вопрос в следующим. Как он будет понимать какой стиль использовать. Что ему помогает понять какой экран.
Где какая-то привязка или ссылка на что-то или ещё что-то. Вот это совсем я не понял.
Буду благодарен, если найдёте время для ответа на мой вопрос.
Куда вставлять:
1) между тегами <style></style>
2) в файл CSS
3) в тег link как отдельный файл CSS
В JavaScript также есть возможность понять ширину экрана/окна браузера. Понимает же в CSS благодаря конструкции
@media (max-width: 50em) {здесь селекторы и свойства к ним, используемые только если окно браузера более 50em}
Если непонятно объяснила, отпишитесь, пожалуйста.
Спасибо Вам за ответ.
«div class=”q”» «/div»
@media (max-width: 50em) .q{width:100px;height100px; }
@media (max-width: 950em) .q{width:1111px;height1111px; }
Значит если я понял правильно то это будет выглядеть так.
То есть при 50em размер дива будет 100х100. И при экране 950em размер дива будет 1111х1111.
И зачет никаких привязок, никаких связок указаний не надо, он сам поймёт.
Если я написал что-то очень глупое. Не судите строго.
1) нет двоеточий в height
2) нет кавычек перед/после селектором .q
3) max-width не ограничена min-width, а значит в приоритете тот, который ниже
4) 950em - это какое-то очень огромное число
В остальном верно:
<div class="q"></div>
<style>
.q {
background: green;
}
@media (max-width: 90em) {.q {width: 1000px; height: 1000px;}}
@media (max-width: 30em) {.q {width: 100px; height: 100px; }}
</style>
Спасибо за неглупые вопросы!
Благодарю Вас за ответ. Извините не мог написать раньше
Если можно я задам Вам ещё вопрос.
А как можно проверить работает ли это. Если имеется только один монитор.
Или надо искать другие.
И ещё может не по теме, но если Вас не затруднит и Вы знаете. Вы не могли бы рассказать как быть. Имею страницу сайта. Но из того что есть многое ИЕ старые не понимают. Я сделал второй вариант где ПХП и Ява. Так вот. Как мне прописать что бы отображалось то что нужно там где надо. Если знаете поделитесь. Если же нет ни беда. Нарою.
Спасибо Вам.
<!--[if IE]> код только для IE <![endif]-->
ps мобильный шаблон отключен (да и css я все от него удалил)
Добавьте в head
<meta content='width=device-width, initial-scale=1' name='viewport'/>
b:if cond='data:blog.isMobile
meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'
b:else
meta content='width=1100' name='viewport'
b:if
2. Для чего нужна строка b:include data='blog' name='all-head-content'/ в head? Я так понимаю она скрипты какие-то грузит для IE, она сильно нужна?
3. Какую часть кода шаблона лучше обернуть в тег article?
2. см http://shpargalkablog.ru/2010/09/optimizatsiya-blogger.html
3. я он него отказалась, так как название блога у меня не в теге h (для Яндекса), а заголовок внутри тега article перестаёт быть заголовок верхнего уровня (для HTML5 и Google). Подробнее http://shpargalkablog.ru/2015/02/h1-seo.html
У меня сайт на вордпресс.
Сам боюсь вносить изменения в редакторе.
Вы не можете мне помочь адаптировать ширину сайта в зависимости от размера экрана?
выше мое обращение...
.s5_wrap {
width: 1128px;
}
Простите, сайт ваш подтёрла, правила Blogger не приветствуют ссылки на сайты для взрослых
Файл 1.css
body {background: green;}
Файл 2.css
body {background: red;}
Файл 1.html
<!DOCTYPE HTML>
<link rel='stylesheet' href='1.css' />
<link rel='stylesheet' media='(min-width: 800px)' href='2.css' />
В общем файле тоже работает: см. исходный код этой страницы.
Есть особенности при вставки @import, вы его имеете ввиду?
body {background: green;}
@media (max-width: 33em) {
body {background: red;}
}
В данном случае какие советы я могу дать? У каждого свои элементы, своя вёрстка, свои потребности.
Без этого на большом мониторе ничего не увидишь
Изначально шрифт, если его не указывать, рассчитывается браузером самостоятельно. Если на странице не писать font-size в px, а в em или rem или в процентах, то браузер справится с его размерами более менее приемлемо. Также есть vw ( http://shpargalkablog.ru/2013/03/px-em-calc.html ). Когда нужно управлять каждым элементом, то тут можно подключить и @media.