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

Да

Нет

  • Способы создания сайта

    1. Какими способами разрабатываются сайты
    2. Как можно сравнить самописные сайты с основанными на CMS
    3. Быстродействие
    4. Безопасность
    5. Функциональность
    6. Простота создания
    7. Как выбрать способ создания сайта

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

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

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

    В этой статье я попытался представить свое видение по этому вопросу. Причем постарался быть максимально объективным, насколько это возможно. Хотя не скрываю, что являюсь сторонником использования самописных вариантов.

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

  • Инструкция по загрузке исходных файлов сайта на локальный веб-сервер

    1. Подготовка локального веб-сервера
    2. Скачивание и распаковка исходных материалов
    3. Перенос файлов на локальный веб-сервер
    4. Импорт таблиц MySQL в базу данных текущего хоста

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

    Как ранее отмечалось, в представленных материалах Сборника в случае, если в ходе рассмотрения статей в программный код сайта или базу данных MySQL вносятся какие-либо изменения, то к ним прилагается последний вариант исходных материалов, включающий все файлы сайта в каталоге "www" и таблицы базы данных MySQL.

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

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

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

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

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

    Что же касается загрузки на хостинг файлов сайта, то по этому вопросу имеется отдельная статья Переносим сайт на хостинг, где показано, как это можно сделать с использованием FTP клиента FileZilla.

Самописный сайт своими руками!

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

Здесь можно посмотреть текущее состояние тестового самописного сайта, который создается в рамках цикла статей Сделай сайт с нуля своими руками.

Описание которого сопровождается исходными файлами с таблицами MySQL, предоставляемые бесплатно в дополнительных материалах.

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


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

Формируем медиа-запросы в 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 код, насчитывающий в общей сложности около семисот строк. Но, как уже отмечалось, большинство назначенных стилевых свойств аналогичны, или полностью совпадают с ранее назначенными стилями, которые рассматривались в предыдущих разделах при оформлении страниц сайта. Поэтому больших сложностей в их понимании возникнуть не должно.

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

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

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


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

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

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

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


Комментарии


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

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

comments powered by HyperComments