Як адаптувати сайт під мобільні пристрої, адаптований дизайн сайту і адаптований шаблон сайту. Останнім часом ці питання цікавлять кожного програміста, у кого вже є свої сайти і треба йти в ногу з часом.
Для початку два приклади css коду:
По-перше, щоб сайт підлаштовувався під мобільні пристрої, необхідно вставити між полями
ось це:Цей рядок говорить браузеру про те, що в стилях CSS прописані стилі для різних дозволів екрану.
Замість одного блоку, у вас два. Залежно з чого ви зайшли на сайт, в коді CSS один захований.
Якщо розмір екрану більше 1020px мобільні стилі # sidebar1_mobail не показуються, якщо менше 1020px будуть ховатися основні # sidebar1. а мобільні відображатися.
Стилі можна прописати під різний розмір, в залежності від розмірів вашого сайту. Необхідно вставити на сторінки додаткові блоки, які при мобільній версії будуть відображатися, а при повній немає.
Якщо сайдбар має відступ, наприклад, від лівого краю батьківського блоку - margin-left: 590px ;. то відстань також вважайте за формулою і ставте в процентах. Таким чином, контент і сайдбар будуть адаптуватися під розміри екрану.
На маленьких екранах сайдбар буде погано виглядати, для цього його потрібно перемістити під контент, а контент розтягнути на всю ширину екрану.
Два варіанти повністю працездатні.
От і все! Тепер ви знаєте як адаптувати сайт під мобільні пристрої, який спосіб вам більше підходить, вибирайте самі.