Розробка, підтримка, SEO, просування, соцмережі та реклама сайтів ☣
Кабінет клієнта
Зареєструватись Забули пароль?
Створення та оптимізація сайтів » Блог » faq » Хитрощі адаптивного дизайну.

Хитрощі адаптивного дизайну.

Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 26-11-2015, 12:06 552 0
Хитрощі адаптивного дизайну.

Традиційний дизайн з фіксованою шириною выдходить в минуле, так як структура, сучасних сайтыв, повинна автоматично змінюватися з урахуванням всіх дозволів дисплеїв.

Тут буду збирати хитрощі які допоможуть полегшити розробку адаптивного дизайну за допомогою HTML5 та CSS3.

1. Media queries - Про стандартні медіазапити.

 

2. Еластичні зображення

Для того, щоб зробити зображення еластичними, просто додайте max-width: 100% і height: auto. Зображення max-width: 100% і height: auto працює в IE7, але не працює в IE8 (ще один дивний баг). Для виправлення потрібно додати width: auto\9 для IE8.


img {
 max-width: 100%; height: auto; width: auto\9; 
}


3. Еластичне вбудовування відео:

Для відео застосовуємо ті ж правила, як для зображень. З незрозумілих причин max-width: 100% (для відео) не працює в Safari. Потрібно використовувати width: 100%.


.video embed,
 .video object,
 .video iframe {width: 100%; height: auto;
}

 
 


Коментарі

⤹ Залишити свій коментар ⤸

  • оновити, якщо не видно коду

Тарифні плани

Потужний старт Стандартний запуск сайту від $400
  • - ♜ -
  • В стартовий тарифний план входить:

  • Розробка та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 5 сторінок
  • Ліцензія двигунчика DLE
Просунутий SEO оптимізований сайт від $700
  • - ♚ -
  • В SEO тарифний план входить:

  • Створення та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 10 сторінок
  • Ліцензія двигунчика DLE
  • 5 силок + перелінковка
Імперський винущувач конкурентів від $999
  • - ♛ -
  • В імперський тарифний план входить:

  • Розробка сайту
  • Наповнення до SEO 20 сторінок
  • Повна оптимізація
  • Ліцензія двигунчика DLE
  • МОЄ НАТХНЕННЯ та ДОСВІД!
/* soc-knopki */