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

Як змінити ширину сайту в залежності від розміру екрану

Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 29-08-2015, 00:14 2 032 0
Як змінити ширину сайту в залежності від розміру екрану

Як змінити ширину сайту в залежності від розміру екрану браузера?

Для того, щоб адаптувати дизайн web-проекту під різні пристрої (мобільні телефони, планшетники, принтери тощо) застосовується Media.

 З усього різноманіття types і Queries, як правило, впроваджують print і width. Розглянемо останній. Він впливає на відображення сайту у вікні браузера різної ширини. Тому для того, щоб побачити його в дії, достатньо зменшити розміри вікна браузера.

 


@media (max-width: 930px) { /* буде показано при роздільності монітора до 930 пікс. */
}
@media (max-width: 930px) and (min-width: 470px) { /* для экрану від 470 до 930 пікс. */
aside {position: static; width: 100%; background: #ccc;}
}
@media (max-width: 469px) { /* якщо максимальна роздільна здатність екрану буде 469 пікс. */
body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;}
}

Замість 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' />

А ще потрібно пам'ятати, що мобільний дивайс може змінити свою орієнтацію:


<!-- Orientation styles for devices w/ max width of 1024px -->
<link rel="stylesheet" href="portrait.css" type="text/css"
media="only screen and (max-device-width:1024px) and (orientation:portrait)" />
<link rel="stylesheet" href="landscape.css" type="text/css"
media="only screen and (max-device-width:1024px) and (orientation:landscape)" />

Щоб  сайт стискався до розмірів екрану потрібно написати мета тег viewport. Наприклад,

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

Розберемо значення атрибута content
1) width = device-width цим ми показуємо, що ширина області перегляду дорівнює ширині екрану пристрою, на якому дивляться наш сайт.
2) initial-scale = 1.0 цим ми показуємо, що масштаб сторінки при завантаженні 100% При цьому користувач, переглядаючи сайт, може сам змінити масштаб.

Іноді на сайтах забороняють користувачеві змінювати масштаб сторінки, що переглядається, тобто користувач завжди бачить веб-сторінку такою, яка вона є, і не може її зробити крупніше. Це робиться тим, що в значенні атрибуту content вказують maximum-scale = 1.0, user-scalable = no"

Наприклад:

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

 
 


Коментарі

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

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

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

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

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

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

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