Подписаться на обновления блога?

Да

Нет

Картинка 3D коробки

Узнать больше

895

Вся правда о заработке на блогах

Этот БЕСПЛАТНЫЙ обучающий курс для тех, кто интересуется заработком на блоге.

Данный материал, основанный на опыте известного блогера Александра Борисова, поможет понять, как можно зарабатывать на блоге действительно реальные деньги и как правильно и эффективно монетизировать его.

  • Картинка 3D коробки

    Узнать больше

    895

    Вся правда о заработке на блогах

    Этот БЕСПЛАТНЫЙ обучающий курс для тех, кто интересуется заработком на блоге.

    Данный материал, основанный на опыте известного блогера Александра Борисова, поможет понять, как можно зарабатывать на блоге действительно реальные деньги и как правильно и эффективно монетизировать его.

  • Узнать больше

    899

    Как заработать в интернете продавая информацию

    Этот БЕСПЛАТНЫЙ обучающий курс по заработку в интернете для тех, кто хочет работать, используя свои знания и опыт.

    В данном материале подробно рассказывается как создавать свои информационные продукты для людей и как продавать их через интернет.

  • Узнать больше

    890

    Как заработать чайнику?

    Многие задаются вопросом, как зарабатывать в интернете? Как начать работать на себя, а не на дядю?

    В БЕСПЛАТНОМ видеокурсе "Как заработать чайнику?", вы найдете много ответов на эти вопросы, которые получите от успешного практика в этой области.

  • Узнать больше

    903

    Создать сайт за 1 час!

    Хорошо известно, что для того, чтобы успешно работать в интернете необходим свой интернет-ресурс.

    Из БЕСПЛАТНОГО видеокурса "Как создать сайт за 1 час" вы узнаете, как можно достаточно быстро сделать бесплатный сайт несложным способом с нуля.

  • Узнать больше

    904

    Как начать зарабатывать на партнерских программах

    Работа на партнерских программах является одной из самых популярных видов заработка.

    БЕСПЛАТНЙ видеокурс "Как начать зарабатывать на партнерских программах" поможет вам освоить этот интересный и эффективный способ работы в интернете.

  • Узнать больше

    905

    ИНФОБИЗНЕС по модели Евгения Попова

    Этот БЕСПЛАТНЫЙ обучающий курс предназначен для тех, кто хочет познакомиться с одним из лучших видов заработка в интернете.

    В данном материале на основе своего опыта автор расскажет каким образом следует строить этот бизнес.

  • Узнать больше

    922

    HTML базовый курс

    БЕСПЛАТНЫЙ обучающий курс предназначен тем, кто делает первые шаги в сайтостроении.

    В этом видеокурсе в доступной форме даются основы языка HTML, являющегося незаменимым при составлении веб-страниц.

  • Узнать больше

    924

    CSS базовый курс

    Этот БЕСПЛАТНЫЙ обучающий курс поможет разобраться в вопросах сайтостроения при создании своего сайта.

    В данном видеокурсе подробно и очень доступно даются основы языка CSS, обеспечивающего управление внешним видом веб-страниц.

  • Узнать больше

    926

    Домен и хостинг

    В этом БЕСПЛАТНОМ обучающем курсе рассказывается как разместить в сети свой вновь созданный интернет-ресурс.

    В видеокурсе пошагово разъясняется как купить домен, купить хостинг, загрузить сайт на хостинг и выполнить все необходимые настройки для его правильной работы.

  • Узнать больше

    927

    Фотошоп для начинающих (бесплатная версия)

    Этот БЕСПЛАТНЫЙ обучающий курс будет полезен тем, хочет освоить работу с графическим редактором "Фотошоп".

    В видеокурсе на конкретном примере показывается как создаются изображения и какие при этом используются инструменты.

  • Узнать больше

    929

    Видеосамоучитель GIMP

    Данный видеокурс поможет освоить работу с дизайном сайта при использовании БЕСПЛАТНОГО графического редактора GIMP.

    В нем можно узнать все основные вопросы по работе с редактором, а именно: что такое слои, как с ними работать, как работать с базовыми инструментами и как работать с фильтрами.

Бесплатные видеокурсы!

Хотите узнать как зарабатывать в интернете и как бесплатно сделать сайт для своей работы, ничего не потратив на обучение?

Здесь Вы можете познакомиться с проверенными способами работы в интернете в БЕСПЛАТНЫХ обучающих курсах по заработку и сайтостроению в разделе Бесплатные Сборника видеокурсов.

Вы здесь: Главная → Как сделать сайт → Адаптация → Формируем медиа-запросы для разных разрешений экранов

Знак папки 2Текущее состояние создаваемого сайта

Свернуть

Знак папки 1 Все статьи cборника "Сделай сайт своими руками с нуля бесплатно"


Автор: / Дата:

Формируем медиа-запросы в CSS для разных разрешений экранов

Здравствуйте уважаемый посетитель!

Сегодня сформируем медиа-запросы с помощью правил CSS и адаптируем наш сайт под мобильные устройства. При этом сделаем так, чтобы сайт хорошо отображался на всех устройствах в установленном диапазоне от 320 до 1920 пикселей.

Содержание


  • Принцип описания медиа-запросов методом 'сначала мобильные'
  • Формируем медиа-запросы для минимального разрешения
  • Назначаем стилевые свойства для разных разрешений в установленном диапазоне
  • Исходные файлы сайта

Принцип описания медиа-запросов методом "сначала мобильные"


Для определения параметров устройств применяются специальные медиа-запросы. С их помощью браузер узнает какое устройство используется при загрузке веб-страницы, и исходя из этого применяются те или иные стилевые свойства.

Таким образом можно подстраивать отображение страниц сайта под разрешение монитора персонального компьютера или дисплея мобильного устройства меняя при необходимости размер изображений и текста, ширину страниц и компоновку их элементов.

Все медиа-запросы обозначаются правилом "@media", после чего следуют условия, при выполнении которых используются назначенные свойства стилей CSS.

Существуют разные типы медиа-запросов и логических операторов. Более подробно об этом можно ознакомиться на соответствующей странице онлайн справочника WebReference.ru.

скриншот 86

В нашем случае будем использовать медиа-запросы типа "width" вместо "device-width". Почему будет использоваться именно такой тип, пояснялось в предыдущей статье Подготавливаем сайт к адаптации под мобильные устройства.

При этом, как в ней также отмечалось, при адаптации сайта будем использовать способ "сначала мобильные". Это означает, что назначение стилей CSS будет производиться начиная с малых размеров экранов в сторону увеличения до максимально возможного.

На рис.1 показано, как будет выглядеть такой медиа-запрос.

  1. @media screen and (min-width: 600px) {

  2. }

Рис.1

Данный запрос означает, что набор правил, описанный стилями CSS, заключенными в фигурных скобках, будет выполняться только в том случае, если ширина экрана будет больше 600 пикселей. Следовательно, те стилевые свойства, которые будут находиться перед ним, будут выполняться для меньшей ширины экрана.

Такая последовательность позволяет обеспечивать более быструю загрузку мобильных устройств. В случае же, если описание медиа-запросов для мобильных устройств будет располагаться в конце таблицы стилей CSS, то это будет требовать переписывания уже примененных стилей, предназначенных для экранов персональных компьютеров, что в итоге будет сказываться на скорость загрузки веб-страниц для таких устройств, как смартфоны и планшеты.

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

Формируем медиа-запросы для минимального разрешения


Для того, чтобы начать описывать медиа-запрос сначала сформируем условие, при котором должны использоваться уже ранее созданные стили CSS. В нашем случае эти свойства должны применяться при превышении ширины экрана больше величины контрольной точки в 600px, когда сайт переходит в обычный двухколоночный вид. О том, из каких соображений была определена эта котрольная точка, пояснялось также в предыдущей статье.

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

При этом, при назначении новых стилей, в случае их совпадения с уже существующими, заключенными в фигурных скобках медиа-запроса, такие свойства из медиа-запроса будут удаляться. Это необходимо для того, чтобы исключить их дублирование и не засорять таблицу стилей CSS лишним кодом.

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

  1. /*----------назначение стилей css для минимального разрешения экранов-----------*/

  2. body {

  3. font-size:0.875em;

  4. }

  5. .wrapper {

  6. min-width:320px;

  7. background:#f3f3f3;

  8. margin:0 auto;

  9. }

  10. /*----------Шапка-----------*/

  11. header {

  12. background:url("/images/header.jpg") no-repeat;

  13. background:170% 100%;

  14. box-shadow:0 0.25em 0.3125em 0 #555;

  15. position:top:0; left:0;

  16. }

  17. .hdr-title {

  18. padding-top:1.3125em;

  19. }

  20. .hdr-block {

  21. height:2.5625em;

  22. }

  23. .hdr-block img {

  24. height:1.5625em;

  25. float:left;

  26. margin-left:4%;

  27. margin-right:2.5%;

  28. }

  29. .hdr-block h1 {

  30. margin-left:12.08%;

  31. font-size:2em;

  32. color:#c03838;

  33. line-height:0.8;

  34. text-shadow:1px 1px 1px #564949;

  35. }

  36. .hdr-p1 {

  37. margin-left:4%;

  38. padding-right:0.875em;

  39. }

  40. .hdr-p2 {

  41. margin-top:0.5em;

  42. margin-left:4%;

  43. padding-bottom:1em;

  44. padding-right:0.875em;

  45. }

  46. .hdr-p1, .hdr-p2 {

  47. font-style:italic;

  48. font-size:1.0625em;

  49. color:#437744;

  50. line-height:1.0;

  51. text-shadow:0.0625em 0.0625em 0.0625em #298384;

  52. }

  53. /*----------Меню-----------*/

  54. .menu {

  55. display:none;

  56. }

  57. /*----------Ротатор-----------*/

  58. section {

  59. width:95%;

  60. margin:1.875em auto 0 auto;

  61. background-color:#eee;

  62. border-radius:0.625em;

  63. box-shadow:0 0 3.75em 0 #fff;

  64. background-image:linear-gradient(to top, #ccc 0%, #e9e9e9 1.5%, #eee 3%, #eee 97%, #f7f7f7 99%, #fafafa 100%);

  65. border-top:0.0625em solid #dedede;

  66. overflow:hidden;

  67. }

  68. .rtr-block1 {

  69. width:100%;

  70. float:left;

  71. position:relative; top:0.125em;

  72. z-index:9;

  73. }

  74. .rtr-screen {

  75. display:none;

  76. margin:3.5% 6.89% 0 6.89%;

  77. }

  78. .flexslider {

  79. margin:0 0 40px 0!important;

  80. }

  81. #brd-slider {

  82. border-radius:0.625em;

  83. border-radius:0.375em solid #888;

  84. border-radius:0.375em solid #888;

  85. border-radius:#fff;

  86. border-radius:#fff;

  87. }

  88. .slides img {

  89. width:100%;

  90. border-radius:0.25em;

  91. }

  92. .rtr-block2 img {

  93. width:100%;

  94. float:left;

  95. }

  96. .rtr-text img {

  97. padding:0 3% 4% 3%;

  98. }

  99. .rtr-text p {

  100. text-indent:4.76%;

  101. color:#006;

  102. font-size:0.9375em;

  103. padding-top:1.38%;

  104. text-align:#justify;

  105. }

  106. .rtr-text h2: nth-child(1) {

  107. display:none;

  108. }

  109. .rtr-text p: nth-child(3) {

  110. display:none;

  111. }

  112. /*----------Область контента-----------*/

  113. .content-block {

  114. width:95%;

  115. margin:1.875em auto 0 auto;

  116. position:relative;

  117. }

  118. main {

  119. margin-right:0;

  120. background:#fbfbfb;

  121. padding:0.625em 2%;

  122. border-radius:0.625em;

  123. box-shadow:0 0 3.75em 0 #fff;

  124. }

  125. .article {

  126. min-height:6.25em;

  127. margin-bottom:1.25em;

  128. }

  129. .comments {

  130. min-height:3.25em;

  131. margin-bottom:1.25em;

  132. }

  133. main h1, main h2, main h3 {

  134. font-size:1.125em;

  135. font-weight:bold;

  136. font-style:italic;

  137. color:#bd072e;

  138. }

  139. main p {

  140. text-indent:2%;

  141. padding-top:0.5%;

  142. color:#2f2f49;

  143. }

  144. main hr {

  145. height:0.0625em;

  146. background:#bd072e;

  147. margin:0.3125em 0 0.625em 0;

  148. box-shadow:0 0 0.0625em 0 #bd072e;

  149. }

  150. .tmpr-text {

  151. width:80%;

  152. font-size:1.0625em;

  153. text-indent:1.25em;

  154. margin:2.25em auto 2.25em auto;

  155. text-align:justify;

  156. }

  157. .tmpr-text p {

  158. color:#a00;

  159. line-height:1.5;

  160. }

  161. aside {

  162. width:15em;

  163. position:position: relative; top:0; right:0;

  164. margin:0 auto;

  165. }

  166. .seach, .subscribe {

  167. background-image:linear-gradient(to top, #c4c4c4 0%, #e9e9e9 5%, #eaeaea 10%, #eaeaea 94%, #f7f7f7 98%, #fafafa 100%);

  168. border-top:0.0625em solid #dedede;

  169. padding:0.3125em 1.25em;

  170. font-size:0.9375em;

  171. color:#212a68;

  172. line-height:0.8;

  173. overflow:hidden;

  174. }

  175. .seach, .subscribe, .banner img: {

  176. border-radius:0.625em;

  177. box-shadow:0 0 3.75em 0 #fff;

  178. }

  179. .subscribe, .banner {

  180. margin-top:0.9375em;

  181. }

  182. .banner img {

  183. height:21.25em;

  184. width:15em;

  185. }

  186. aside h3 {

  187. text-align:center;

  188. font-size:1.125em;

  189. font-weight:bold;

  190. padding-top:0.625em;

  191. margin-bottom:0.9375em;

  192. }

  193. select, input {

  194. height:1.875em;

  195. }

  196. select, input[name="word"], input[name="mode"], input[name="name"], input[name="email"] {

  197. margin:0.5625em 0 0.625em 0;

  198. padding:0.3125em 0.5em 0 0.5em;

  199. box-sizing:border-box;

  200. background:#fdfadc;

  201. box-shadow:0.1875em 0.1875em 0.3125em 0 #8b8e8d inset;

  202. border-radius:0.3125em;

  203. border-bottom:0.125em solid #fff;

  204. border-right:0.125em solid #fff;

  205. }

  206. input[name="word"], input[name="name"], input[name="email"] {

  207. width:12.5em;

  208. padding:0.3125em 0.5em 0 0.5em;

  209. }

  210. select {

  211. width:7.8125em;

  212. padding:0.3125em 0 0 0.3125em;

  213. float:left;

  214. }

  215. input[type="submit"] {

  216. height:1.875em;

  217. margin-bottom:0.625em;

  218. border-radius:0.3125em;

  219. background:#a76d6d;

  220. text-align:center;

  221. font-weight:bold;

  222. color:#fff;

  223. float:right;

  224. background-image:linear-gradient(to top, #653939, #a76d6d 70%, #c39696);

  225. box-shadow:0.125em 0.125em 0.25em 0 #422a2a;

  226. border-width:0.125em;

  227. border-style:solid;

  228. border-color:#ddbebe #241616 #241616 #ddbebe;

  229. }

  230. input[value="Поиск"] {

  231. width:3.75em;

  232. margin-top:0.5625em;

  233. }

  234. input[value="Подписаться"] {

  235. width:7.5em;

  236. margin-top:0.3125em;

  237. }

  238. input[type="submit"]: {

  239. box-shadow:none;

  240. border-color:#c39696 #a76d6d #653939 #a76d6d;

  241. }

  242. input[type="submit"]: {

  243. box-shadow:0 0 0.4375em 0.125em #422a2a inset;

  244. border-color:#777 #fff #fff #777;

  245. }

  246. /*----------Футер-----------*/

  247. footer {

  248. margin-top: 1.875em;

  249. background: #51878a;

  250. padding-bottom: 1.875em;

  251. }

  252. .ftr-menu {

  253. width: 60%;

  254. margin: 0 auto;

  255. padding-top: 0.9375em;

  256. }

  257. .ftr-menu ul li {

  258. display: block;

  259. list-style-type: none;

  260. vertical-align: middle;

  261. }

  262. .ftr-menu a {

  263. display: block;

  264. text-align: center;

  265. font-size: 0.9375em;

  266. font-weight: bold;

  267. line-height: 2.5;

  268. color: #fbc406;

  269. text-decoration: none;

  270. padding: 0 0.3125em;

  271. }

  272. .ftr-activ a {

  273. background: #487673;

  274. box-shadow: 0.0625em 0.1875em 0.375em 0 #4c5150 inset;

  275. border-radius: 0.375em;

  276. }

  277. .ftr-menu a:hover {

  278. text-decoration: underline;

  279. }

  280. footer p {

  281. margin-top: 1.4375em;

  282. text-align: center;

  283. font-size: 1.125em;

  284. color: #fff;

  285. }

  286. /*----------назначение стилей css для экранов более 600px-----------*/

  287. @media screen and (max-width: 600px) {

  288. body {

  289. font-size: 1em;

  290. }

  291. .wrappe {

  292. border: 0.0625em solid #ccc;

  293. max-width: 1920px;

  294. }

  295. /*--------------Шапка-------*/

  296. header {

  297. background-size: 100% 100%;

  298. border-top: 0.0625em solid #ddd;

  299. }

  300. .hdr-title {

  301. padding-top: 1.75em;

  302. }

  303. .hdr-block {

  304. height: 2.875em;

  305. }

  306. .hdr-block img {

  307. height: 1.875em;

  308. float: left;

  309. margin-left: 8.33%;

  310. margin-right: 2.5;

  311. }

  312. .hdr-block h1 {

  313. margin-left: 12.08%;

  314. font-size: 2.25em;

  315. color: #c03838;

  316. line-height: 0.8;

  317. text-shadow: 0.0625em 0.0625em 0.0625em #564949;

  318. }

  319. .hdr-p1 {

  320. height: 1.3125em;

  321. margin-left: 16.33%;

  322. }

  323. .hdr-p2 {

  324. height: 1.75em;

  325. margin-left: 20.25%;

  326. margin-top: 0;

  327. padding-bottom: 0;

  328. }

  329. .hdr-p1, .hdr-p2 {

  330. font-style: italic;

  331. font-size: 1.4375em;

  332. line-height: 0.8;

  333. text-shadow: 0.0625em 0.0625em 0.0625em #298384;

  334. }

  335. /*----------Меню-----------*/

  336. .menu {

  337. display: table;

  338. width: 83.33%;

  339. margin: 0 auto;

  340. }

  341. .menu ul {

  342. display: table-row;

  343. }

  344. .menu ul li {

  345. display: table-cell;

  346. list-style-type: none;

  347. width: 20%;

  348. border: 0.0625em solid #2e376c;

  349. border-radius: 0.375em 0.375em 0 0;

  350. box-shadow: 0 0 0.1875em 0 #2e376c;

  351. vertical-align: middle;

  352. }

  353. .menu a {

  354. height: 3em;

  355. width: 1920px;

  356. display: table-cell;

  357. vertical-align: middle;

  358. text-align: center;

  359. font-size: 1em;

  360. font-weight: bold;

  361. line-height: 1;

  362. color: #2e376c;

  363. text-decoration: none;

  364. padding: 0 0.3125em;

  365. }

  366. .activ a {

  367. background: #e1e0e2;

  368. box-shadow: 0.0625em 0.1875em 0.375em 0 #4c5150 inset;

  369. }

  370. .menu a:hover {

  371. background: #eeefcd;

  372. box-shadow: 0.0625em 0.1875em 0.375em 0 #4c5150 inset;

  373. }

  374. /*----------Ротатор-----------*/

  375. section {

  376. width: 83.33%;

  377. margin: 1.875em auto 0 auto;

  378. background-color: #eee;

  379. border-radius: 0.625em;

  380. box-shadow: 0 0 3.75em 0 #fff;

  381. background-image: linear-gradient(to top, #ccc 0%, #e9e9e9 1.5%, #eee 3%, #eee 97%, #f7f7f7 99%, #fafafa 100%;

  382. border-top: 0.0625em solid #dedede;

  383. }

  384. .rtr-block1 {

  385. width: 58%;

  386. float: none;

  387. display: table-cell;

  388. vertical-align: middle;

  389. position: relative; top:0.125em;

  390. z-index: 9;

  391. }

  392. .rtr-screen {

  393. display: none;

  394. margin: 6.89% 6.89% 6.89% 6.89%;

  395. }

  396. .flexslider {

  397. margin: 0 0 60px 0!important;

  398. }

  399. #brd-slider {

  400. border-radius: 0.625em;

  401. border-top: 0.375em solid #888;

  402. border-left: 0.375em solid #888;

  403. border-bottom: 0.375em solid #fff;

  404. border-right: 0.375em solid #fff;

  405. }

  406. .slides img {

  407. width: 100%;

  408. border-radius: 0.25em;

  409. }

  410. .rtr-block2 {

  411. width: 42%;

  412. float: none;

  413. display: table-cell;

  414. vertical-align: middle;

  415. }

  416. .rtr-text {

  417. padding: 4.76% 7.14% 4.76% 0;

  418. }

  419. .rtr-text h2 {

  420. text-align: center;

  421. font-size: 1.25em;

  422. color: #ee1414;

  423. padding: 1.19% 0 2.38% 0;

  424. }

  425. .rtr-text h2: nth-child(1) {

  426. displayblock;

  427. }

  428. .rtr-text p: nth-child(3) {

  429. displayblock;

  430. }

  431. .rtr-text p {

  432. text-align: left;

  433. color: #2f2f49;

  434. font-size: 1em;

  435. padding-top: 2.38%;

  436. }

  437. /*----------Область контента-----------*/

  438. .content-block {

  439. min-height: 47.5em;

  440. width: 83.33%;

  441. margin: 1.875em auto 0 auto;

  442. position: relative;

  443. }

  444. main {

  445. margin-right: 16.25em;

  446. }

  447. .tmpr-text {

  448. font-size: 1.1875em;

  449. margin: 6.25em auto 6.25em auto;

  450. }

  451. aside {

  452. position: absolute; top:0; right:0;

  453. margin: 6.25em auto 6.25em auto;

  454. }

  455. /*----------Футер-----------*/

  456. footer {

  457. height: 8.6875em;

  458. padding-bottom: 0;

  459. }

  460. .ftr-menu {

  461. display: table;

  462. width: 83.33%;

  463. }

  464. .ftr-menu ul {

  465. display: table-row;

  466. }

  467. .ftr-menu ul li {

  468. display: table-cell;

  469. width: 20%;

  470. }

  471. .ftr-menu a {

  472. height: 2.8125em;

  473. width: 1920px;

  474. display: table-cell;

  475. vertical-align: middle;

  476. font-size: 0.9375em;

  477. line-height: 1;

  478. }

  479. }

Рис.2

Как видно, весь код здесь разбит на две части - то, что описывает страницу до контрольной точки при ширине экрана до 600px и после, что описывается медиа-запросом.

В связи с тем, что представленный код CSS имеет достаточно большой объем, подробно рассмотреть его стилевые свойства не представляется возможным. При этом надо учесть, что, практически, все они аналогичны тем, которые ранее назначались при оформлении веб-страниц, а часть из них вообще осталась без изменений. Поэтому нет необходимости повторяться и снова подробно все это рассматривать.

Но, на некоторых моментах следует все же остановиться.

  • при назначении новых, а также для ранее сформированных стилевых свойств, которые определяют внутренние и внешние отступы и другие параметры элементов веб-страниц, здесь используются относительные величины em. Такое определение размеров позволяет более пропорционально отображать страницы при большом разбросе разрешений экранов;
  • в строке 3 для всей области body для экранов с небольшим разрешением, свойством font-size назначен шрифт в размере 0.875em. А для разрешений более 600px в строке 289 определен прежний размер в 1em. Такое назначение шрифта будет способствовать также более пропорциональному отображению страниц сайта не ухудшая способность чтения текста при разной ширине экрана. В дальнейшем, при назначении стилевых свойств для других разрешений мы также будем делать соответствующие изменения шрифта;
  • в строке 6 свойством min-width указана ширина экрана, равная минимальному значению диапазона в 320px, максимальная же величина в 1920px определена аналогичным свойством в строке 293;
  • в строке 13 свойству background присвоено значение равное 170% 100%, которое позволяет при малом размере экрана отодвинуть в правую сторону за рамки страницы фрагмент изображения вора и автомобиля, оставляя в композиции шапки лишь только фон. В строке 297, при ширине экрана более 600px, значением 100% 100% этого же свойства картинка шапки восстанавливается в полном размере;
  • в связи с тем, что при минимальном размере экрана Главное меню должно быть скрыто и преобразовано в виде выпадающего меню, то на данном этапе в строке 55 свойством display со значением none оно просто удаляется из общего потока. Следующая часть по адаптации сайта под мобильные устройства будет уделена именно вопросу создания выпадающего меню, где мы и добавим соответствующие стилевые свойства в нашу таблицу стилей CSS;
  • в ротаторе, для переноса рекламного блока с правой стороны в низ под экран, в стилях, относящихся к классам .rtr-block1 и .rtr-block2 в строках 70,94 назначено свойство float, которое позволяет сделать элементы плавающими. При ширине же экрана более 600px для этих классов в строках 386,412 свойством float со значением none отменяется плавающий характер этих элементов. Взамен, в строках 387,413 свойством display со значением table-cell, рекламный блок перемещается на прежнее место, справа от экрана;
  • в строках 107,110 на минимальной ширине экрана, для уменьшения размера рекламного блока, свойством display со значением none псевдоклассов .rtr-text h2: nth-child(1) и .rtr-text p: nth-child(3) в тексте скрыты заголовок и второй абзац. При ширине экрана более 600px, в строках 425,428 свойством display со значением block этих же псевдоклассов заголовок и второй абзац в тексте рекламного блока восстановлены на прежнем месте;

Если теперь, после внесенных изменений в таблицу стилей CSS в режиме мобильного устройства (как мы это делали в предыдущей статье) открыть главную страницу и выбрать ширину экрана в 320px, то можно увидеть, как изменился внешний ее вид при таком небольшом размере экрана.

Для увеличения / уменьшения размера изображения кликните по картинке
Формирование медиа-запросов, картинка 1

Рис.3

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

Также можно убедиться, что при переходе за контрольную точку, т.е. при увеличении ширины экрана более 600px, страница преобразуется в двухколоночный вид. Но при этом отступы по ширине значительно уменьшены по сравнению с обычным режимом, а в рекламном блоке для уменьшения его размера скрыт второй абзац. Ниже на скриншоте показан такой вариант веб-страницы у самой границы контрольной точки, при разрешении экрана в 600px.

Для увеличения / уменьшения размера изображения кликните по картинке
Формирование медиа-запросов, картинка 2

Рис.4

Ну, а на следующем скриншоте показан обычный вид страницы, соответствующий персональному компьютеру при разрешении в 1200px.

Для увеличения / уменьшения размера изображения кликните по картинке
Формирование медиа-запросов, картинка 3

Рис.5

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

Назначаем стилевые свойства для разных разрешений в установленном диапазоне


После того, как мы адаптировали сайт под минимальное разрешение экрана в 320px, теперь пройдем по всему диапазону и с помощью медиа-запросов отрегулируем внешний вид страницы, подстраивая в области body размер em и другие некоторые свойства.

Ниже приведены дополнительные медиа-запросы, которые обеспечивают плавное изменение внешнего вида страницы во всем установленном диапазоне, а также показано изменение свойств в ранее сформированном запросе при "min-width" равной 600px.

  1. /*----------назначение стилей css для минимального разрешения экранов приведено в таблице на рис.2-----------*/

  2. /*----------назначение стилей css для экранов более 350px-----------*/

  3. @media only screen and (min-width: 350px) {

  4. .ftr-menu a {

  5. font-size: 1em;

  6. }

  7. .hdr-block {

  8. height: 2.25em;

  9. }

  10. .hdr-p1 {

  11. margin-left: 10%;

  12. }

  13. .hdr-p2 {

  14. margin-left: 15%;

  15. }

  16. }

  17. /*----------назначение стилей css для экранов более 400px-----------*/

  18. @media only screen and (min-width: 400px) {

  19. .ftr-menu {

  20. width: 50%;

  21. }

  22. .hdr-p1, .hdr-p2 {

  23. font-size: 1.125em;

  24. }

  25. }

  26. /*----------назначение стилей css для экранов более 450px-----------*/

  27. @media only screen and (min-width: 450px) {

  28. .hdr-p1, .hdr-p2 {

  29. font-size: 1.25em;

  30. }

  31. }

  32. /*----------назначение стилей css для экранов более 500px-----------*/

  33. @media only screen and (min-width: 500px) {

  34. .ftr-menu {

  35. width: 40%;

  36. }

  37. }

  38. /*----------изменение стилей css для экранов более 600px, приведенных в таблице на рис.2-----------*/

  39. @media only screen and (min-width: 600px) {

  40. .wrappe {

  41. border: 0.0625em solid #ccc;

  42. max-width: 1920px;

  43. }

  44. header {

  45. background-size: 170% 100%;

  46. border-top: 0.0625em solid #ddd;

  47. }

  48. .menu {

  49. display: table;

  50. width: 95%;

  51. margin: 0 auto;

  52. }

  53. .menu a {

  54. height: height: 2.875em;

  55. width: 1920px;

  56. display: table-cell;

  57. vertical-align: middle;

  58. text-align: center;

  59. font-size: 0.875em;

  60. font-weight: bold;

  61. line-height: 1;

  62. color: #2e376c;

  63. text-decoration: none;

  64. padding: 0 0.3125em;

  65. }

  66. section {

  67. width: 95%;

  68. margin: 1.875em auto 0 auto;

  69. background-color: #eee;

  70. border-radius: 0.625em;

  71. box-shadow: 0 0 3.75em 0 #fff;

  72. background-image: linear-gradient(to top, #ccc 0%, #e9e9e9 1.5%, #eee 3%, #eee 97%, #f7f7f7 99%, #fafafa 100%;

  73. border-top: 0.0625em solid #dedede;

  74. }

  75. .rtr-text h2 {

  76. text-align: center;

  77. font-size: 1.0625em;

  78. color: #ee1414;

  79. padding: 1.19% 0 2.38% 0;

  80. }

  81. .rtr-text p {

  82. text-align: left;

  83. color: #2f2f49;

  84. font-size: 0.875em;

  85. padding-top: 2.38%;

  86. }

  87. .content-block {

  88. min-height: 47.5em;

  89. width: 95%;

  90. margin: 1.875em auto 0 auto;

  91. position: relative;

  92. }

  93. .ftr-menu {

  94. display: table;

  95. width: 95%;

  96. }

  97. }

  98. /*----------назначение стилей css для экранов более 700px-----------*/

  99. @media only screen and (min-width: 700px) {

  100. .rtr-text h2 {

  101. font-size: 1.125em;

  102. }

  103. .rtr-text p {

  104. font-size: 0.9375em;

  105. }

  106. .ftr-menu a {

  107. font-size: 0.9375em;

  108. }

  109. .menu a {

  110. font-size: 0.9375em;

  111. }

  112. }

  113. /*----------назначение стилей css для экранов более 800px-----------*/

  114. @media only screen and (min-width: 800px) {

  115. .hdr-p1, .hdr-p2 h2 {

  116. font-size: 1.4375em;

  117. }

  118. .rtr-text p: nth-child(3) {

  119. display: block;

  120. }

  121. .ftr-menu a {

  122. font-size: 1em;

  123. }

  124. .menu a {

  125. height: 3em;

  126. font-size: 1em;

  127. }

  128. }

  129. /*----------назначение стилей css для экранов более 1000px-----------*/

  130. @media only screen and (min-width: 1000px) {

  131. body {

  132. font-size: 1em;

  133. }

  134. header {

  135. background-size: 100% 100%;

  136. }

  137. .menu {

  138. width: 83.33%;

  139. }

  140. .menu a {

  141. height: 3.125em;

  142. font-size: 1em;

  143. }

  144. section {

  145. width: 83.33%;

  146. }

  147. .rtr-text h2 {

  148. font-size: 1.125em;

  149. }

  150. .rtr-text p {

  151. font-size: 0.9375em;

  152. }

  153. .content-block {

  154. width: 83.33%;

  155. }

  156. main {

  157. margin-right: 17.5em;

  158. }

  159. .ftr-menu {

  160. width: 83.33%;

  161. }

  162. }

  163. /*----------назначение стилей css для экранов более 1280px-----------*/

  164. @media only screen and (min-width: 1280px) {

  165. body {

  166. font-size: 1.0625em;

  167. }

  168. .rtr-text h2 {

  169. font-size: 1.25em;

  170. }

  171. .rtr-text p {

  172. font-size: 1em;

  173. }

  174. }

  175. /*----------назначение стилей css для экранов более 1360px-----------*/

  176. @media only screen and (min-width: 1360px) {

  177. body {

  178. font-size: 1.125em;

  179. }

  180. }

  181. /*----------назначение стилей css для экранов более 1500px-----------*/

  182. @media only screen and (min-width: 1500px) {

  183. body {

  184. font-size: 1.1875em;

  185. }

  186. }

  187. /*----------назначение стилей css для экранов более 1700px-----------*/

  188. @media only screen and (min-width: 1700px) {

  189. body {

  190. font-size: 1.25em;

  191. }

  192. .wrapper {

  193. max-width: 1920px;

  194. }

  195. }

Рис.6

Таким образом, постепенно двигаясь от минимальной ширины экрана в сторону увеличения и изменяя стилевые свойства мы адаптировали сайт под возможные разрешения экранов в установленном диапазоне от 320 до 1920 пикселей.

Для того, чтобы в этом убедиться можно воспользоваться дополнительными материалами, и установив на сайт последнюю версию файла "main.css" проверить это в инструменте разработчика какого-нибудь браузера. Либо посмотреть работу сайта по ссылке в начале статьи, где имеется возможность проверить отображение страниц на всем диапазоне ширины экрана.

Понятно, что в одной статье невозможно подробно пояснить CSS код, насчитывающий в общей сложности около семисот строк. Но, как уже отмечалось, большинство назначенных стилевых свойств аналогичны, или полностью совпадают с ранее назначенными стилями, которые рассматривались в предыдущих разделах при оформлении страниц сайта. Поэтому больших сложностей в их понимании возникнуть не должно.

Но, если у кого все же возникнут какие-либо вопросы по данной теме, то задавайте их в комментариях, всегда буду готов на них ответить.

В следующей статье мы создадим выпадающее меню и дополнительный элемент навигации, называемый "Хлебные крошки", и таким образом полностью закончим адаптацию нашего сайта под мобильные устройства.

Исходные файлы сайта


Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать бесплатно в дополнительных материалах здесь.

С уважением, Николай Гришин

Читать дальше


Подписка


Здесь вы можете подписаться на получение уведомлений о выходе новых статей блога.

Необходимо отметить, что данные об e-mail надежно защищены (работа сайта обеспечивается только через защищенные соединения по протоколу SSL) и не предназначены для использования третьими лицами.

Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments

Социальные сети


Если Вам понравилась эта статья и считаете, что она будет полезна и для других, Вы можете поделиться об этом с друзьями в социальных сетях.

Другие статьи из рубрики "Как сделать сайт"


Показать больше


  • Google+ Опубликованные статьи можно также смотреть в подборках Google+