1. Виконати інтерактивну вправу № 1
  2. Виконати інтерактивну вправу № 2
  3. Виконати інтерактивну вправу № 3
  4. Опанувати веб конспект
  5. Виконати практичне завдання № 1
  6. Виконати практичне завдання № 2



Відносні одиниці вимірювання

Ваш сайт повинен виглядати однаково на всіх пристроях. Повністю на всіх! від мобільного телефону до самого великого дозволу монітора.

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

На вашому сайті повинен бути ЄДИНИЙ адаптивний дизайн, в якому використовується ОДИН код з коригуванням за розміром екрана.


починаючи з 21 квітня 2015 року Гугл ввів нові методи ранжирування сайтів, в основі якого лежить адаптивний дизайн сайту. Якщо ваш сайт не має адаптивного дизайну, ваш ресурс буде знижуватися у видачі пошукової системи. Ось воно диво мобільних пристроїв.

веб_технології_12.pptx

Варто подивитися та занотувати нові поняття та перевірити скріпти

веб_урок_17-1-практична.docx
веб_урок_17-2-практична.pdf

Список популярних медіа-запитів для стандартного набору розширення екранів.

@media only screen and (max-width : 1920px) {/* CSS правила */ }

@media only screen and (max-width : 1680px) {}

@media only screen and (max-width : 1366px) {}

@media only screen and (max-width : 1280px) {}

@media only screen and (max-width : 1024px) {}

@media only screen and (max-width : 800px) {}

@media only screen and (max-width : 768px) {}

@media only screen and (max-width : 600px) {}

@media only screen and (max-width : 533px) {}

@media only screen and (max-width : 360px) {}

@media only screen and (max-width : 320px) {}

@media only screen and (max-width : 240px) {}

@media only screen and (max-width : 176px) {}