Те, що виглядає чудово на великому екрані настільного комп’ютера, зазвичай потребує деякого доопрацювання для менших пристроїв. Це зазвичай передбачає застосування менших розмірів шрифтів, відступів, полів, ширини стовпців/клада, або приховування певних елементів на менших пристроях.
Esl надає чотири точки розриву «з коробки»:
| Точка розриву | @media запит |
| Настільний комп’ютер | Базова точка розриву |
| Портретний планшет | < 992px |
| Мобільний ландшафт | < 768px |
| Мобільний портрет | < 478px |
Стилі, встановлені на базовій точці розриву, успадковуються всіма іншими точками розриву.
Після завершення стилізації сторінки на базовій точці розриву (настільний комп’ютер) не забудьте переглянути та відрегулювати стилі й на інших точках розриву.
Щоб переглянути та редагувати стилі для конкретної точки розриву, просто натисніть на значок точки розриву, розташований у центрі панелі інструментів двигуна. Або за допомогою гарячої клавіші “CMD/CTRL + B”.
Скріншот вище показує, як двигун редагує мобільну портретну точку розриву.
Поряд із значками точок розриву є поля для ширини (“W”), висоти (“H”) та масштабу (%).
Користувацькі точки розриву
Щоб почати використовувати користувацькі точки розриву, спочатку потрібно ввімкнути їх у вашій панелі керування WordPress у розділі Esl > Налаштування > Загальні > Користувацькі точки розриву:
Після ввімкнення ви можете отримати доступ до менеджера точок розриву в двигуні, натиснувши на значок з трьома крапками на панелі інструментів двигуна (поряд із першим значком точки розриву):
Редагування точки розриву
Натискання на значок олівця відкриває параметри редагування вибраної точки розриву:
Ви можете редагувати такі властивості точки розриву:
| Властивість | Опис |
| Мітка | Використовується при наведенні на іконку точки перелому в панелі інструментів двигуна |
| Ширина (пікселі) | Значення min-width/max-width медіа-запиту (залежно від базової точки перелому) |
| Ширина (Двигун) | Ширина використовується при переході до точки перелому в двигуні |
| Іконка | Використовується як іконка точки перелому в панелі інструментів двигуна |
| Базова точка перелому | Встановіть точку перелому як базову точку перелому |
| Ключ | Не підлягає налаштуванню (використовується для зберігання та ідентифікації налаштувань точки перелому) |
Найпоширеніша дія – налаштувати ширини за замовчуванням (мобільних) точок перелому. Наступний скріншот показує вам “Портрет планшета” з користувацькою шириною 1023px:
Це означає, що будь-які стилі, встановлені на пункті перелому “Портрет планшета”, будуть застосовуватися до пристроїв з шириною менше 1024px.
Створення нових точок перелому
Ви можете створити стільки додаткових користувацьких точок перелому, скільки хочете. Хоча, рекомендується налаштувати ширини за замовчуванням мобільних точок перелому за вашим бажанням перед використанням додаткових точок перелому.
Вам рідко знадобиться більше ніж одна або дві додаткові точки перелому на верх базових.
Натискання на іконку “+” (плюс) у заголовку менеджера точок перелому відкриває форму створення точки перелому.
Наступний скріншот показує, як ми створили нову точку перелому під назвою “Велика” з шириною 1400px:
Як тільки ви натискаєте “Створити”, ваша новостворена точка перелому повинна з’явитися в менеджері точок перелому (поряд з міткою “CUSTOM”) & в панелі інструментів двигуна так:
Оскільки ми встановили ширину цієї нової точки перелому на 1400px, вона відображається як перша точка перелому, оскільки вона тепер найбільша з наших точок перелому. Десктоп (базова точка перелому) має ширину за замовчуванням 1279px.
Призупинення користувацької точки перелому
Ви можете призупинити будь-яку з ваших користувацьких точок перелому, переключивши прапорець з правого боку менеджера точок перелому:
Призупинення користувацької точки перелому дозволяє вам пропустити генерацію стилів для неї на фронтенді, зберігаючи при цьому стилі, які ви налаштували по всьому сайту, не потрібно їх видаляти одну за одною. Що, на повністю розробленому сайті, може налічувати тисячі налаштувань.
Скидання базової точки перелому
Щоб відновити значення за замовчуванням для стандартної точки зупинки, натисніть на іконку “скинути” (поряд з олівцем).
Скидання всіх точок зупинки
Натискання на іконку “шестерні” у заголовку менеджера точок зупинки відкриває дію “Скинути: Точки зупинки”. Натискання цієї кнопки видаляє всі зміни точок зупинки (стандартні та власні) з бази даних.
Налаштування, специфічні для точок зупинки, виконані на елементі або Теми стилів, не видаляються. Будь ласка, виберіть настільний або мобільний варіант на самому початку.
Розуміння базової точки зупинки
Базова точка зупинки не має запиту @media. Тому всі стилі, задані в базовій точці зупинки, застосовуються до всіх ширин екрана.
Саме тому, за замовчуванням, будь-які стилі, задані для точки зупинки “Настільний”, видимі в будь-якій іншій точці зупинки. Якщо ви не вкажете стиль для конкретної точки зупинки, тоді правило, специфічне для точки зупинки, матиме перевагу над стилем базової точки зупинки.
Коли ви редагуєте точку зупинки, ви можете встановити її як “Базову точку зупинки”. Тоді всі стилі, задані для цієї нової базової точки зупинки, успадковуються вгору і вниз по ланцюгу точок зупинки.
На наступному скріншоті ви можете бачити, що точка зупинки “Портрет планшета” була встановлена як базова точка зупинки.
Жовта крапка, лінії та стрілки поряд з іконками точок зупинки повинні допомогти візуалізувати успадкування стилів:
Дизайн з фокусом на мобільні пристрої
Стилізація в Esl за замовчуванням відбувається від найбільшої точки зупинки до “Портрет планшета” > “Пейзаж мобільного” та “Портрет мобільного”.
Використовуйте так званий дизайн з фокусом на мобільні пристрої, встановивши найменшу точку зупинки як базову точку зупинки.
Наступний скріншот показує “Портрет мобільного” (наша найменша точка зупинки), встановлену як базову точку зупинки. Тепер ми використовуємо підхід з фокусом на мобільні пристрої. Також на це вказує етикетка “MOBILE FIRST” у заголовку менеджера точок зупинки:
Ви також помітите, що порядок точок зупинки звернений, і тепер починається з найменшої точки зупинки. Тепер ви можете почати розробляти свої сторінки, починаючи з найменшої точки зупинки.
Відновлення (Esl) CSS файлів
Кожного разу, коли ви настроюєте ширину стандартної точки зупинки, Esl автоматично оновлює будь-які CSS файли Esl (як frontend.min.css тощо), що містять медіа-запити для цієї точки зупинки.
Якщо ви помітили, що ваші ширини зупинок програми на фронтенді не застосовуються коректно, будь ласка, перегенеруйте свої CSS файли Esl, натиснувши кнопку “Перегенерувати CSS файли” під Esl > Налаштування > Загальні > Користувацькі зупинки.