Prok-Torrent, вот этого не знаю, но было время искал и находил, плотно закачивал, но в один момент просто этот сервис слетел, так что больше не ищу и вообще не слышал, но если только платно, то можно найти.
Но как основном делают все, это решили вопрос и тема закрыта. Но здесь раздел не позволяет наверно закрывать, но можно же просто написать, что не по теме и создайте для себя ее, это же вам нужно.
Появилась проблема с адаптацией сайта под мобильные устройства. Проблема состоит в следующем, после прописывания в html коде строчки <meta name="viewport" content="width=device-width, initial-scale=1.0" /> , начинаю подключать таблицу стилей строкой в html <link rel="stylesheet" href="/CSS/2081.css" /> или <link type="text/css" rel="StyleSheet" href="/CSS/2081.css" /> (опять же какая строка верная не понятно) , на что гугл пишет, контент шире экрана. Создается такое впечатление, что таблица стилей просто не подхватывается. Если кто то сталкивался, буду очень признателен за помощь.
medved2121, шаблон сайта не адаптивный, то что вы называете подключением таблицей стилей, так это медиа запросы, которые не правильно составлены и прописаны (в скобках не указаны стили которые будут применяться), вообщем на данный момент там нет никаких условий.
Выход: почитайте мануалы или возьмите конкретные готовые шаблоны для того чтобы понять суть работы. Если вам нравится ваш шаблон и нет желания взять готовый адаптивный, то для начала шаблон можно сделать на основе гибкой разметки и уже после доводим до ума применяя медиа запросы.
Вообщем а пока гугл так и будет писать что контент шире экрана).
Сообщение отредактировал Angerfist - Четверг, 01 Декабря 2016, 13:48
Ну и так далее, изучаем таблицу CSS, и делаем гибкими параметры сайдбара, футера и т.д.
К примеру ширина сайдбара 250px, а ширина всего контента сайта 1000px мы делим 250 на 1000 и умножаем на 100, получается 25%, пишем вместо фиксированных 250px - 25% в стиле.
Для внутренних компонентов, боковые сайдбары и основной контент, уже не указываем максимальную ширину, мы уже знаем её в заглавных стилях родителя 1000px и 100%, хватит лишь процентных соотношений, чтобы в итоге выходила сумма 100% (25% левый сайдбар, значит справа ширина контента 75%).
Что касается убирания сайдбара под контент (эффект складывания), то делается к примеру исходя из параметров шаблона (допустим после 960px будем прятать боковой бар вниз), отменой выравнивания float справа или слева в медиа запросе. Допустим выдуманный класс sidebar-left, то пишем в конце таблице стилей:
Код
@media all and (max-width:960px) { .sidebar-left {float:none; width:auto;} }
или
Код
@media all and (max-width:960px) { .sidebar-left {float:none; width:100%;} }
Вообщем это один из способов весь макет шаблона сделать гибким, и далее через условия медиа запросов подгонять детали которые выходят за рамки...
Так проще я думаю чем поэтапно писать кучу медиазапросов для всех типов мобильных устройств.
Сообщение отредактировал Angerfist - Четверг, 01 Декабря 2016, 14:50
Angerfist, ArtElect, Спасибо для начала информации хватит. Еще один вопрос: таблицу стиле под мобильный интерфейс отдельную делать или вносить изменения в существующую?
medved2121, вносить изменения конечно, примеры я привёл, у вас не такая сложная каскадная таблица стилей чтобы разобраться, просто оригинал сохраните в блокноте, чтобы в случае ошибок можно было быстро сравнить.
Медиа запросы пишите в конце таблицы, а в основных стилях, где вносите поправки можно заккоментировать (будет потом проще самому).
Короче гибким макет сделать не сложно и не долго, ковыряться дальше придётся уже с контентом (виды материалов, изображения и т.д., или же подгоняя отступы.
Сообщение отредактировал Angerfist - Четверг, 01 Декабря 2016, 15:06
