Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> Помогите со стилями
maximka787  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 1228
Пользователь №: 2705
На форуме: 9 лет, 3 месяца, 26 дней
Карма: 1




Парни, подскажите в чем проблема. Сайт на мобильных устройствах открывается сначала как десктопный и только после полной загрузки сжимается для мобильной адаптивной верстки. Как это можно исправить?

Вот код подключения

<link href="main-style.css" rel="stylesheet" media="screen">
<link rel="stylesheet" media="(max-width:600px)" href="mobile.css" />
<link rel="stylesheet" media="(min-width:601px)" href="desctop.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

main-style.css Общие стили (фон, шрифт)
mobile.css скрытие дэсктопных ненужных элементов + стили для мобильных устр.
desctop.css скрытие мобильных ненужных элементов + стили для компа

На медленном инете сайт сек 10 показывается вообще сломанная верстка, потом собирается в нормальный дизайн. При этом элементы которые надо скрыть все отображаются в эти 10 сек.


--------------------
..Работает - не трогай!
PM
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Stave  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Старик
***

Профиль
Группа: Пользователь
Сообщений: 138
Пользователь №: 40254
На форуме: 2 года, 2 месяца, 29 дней
Карма: 4




попробуй так:

default.css
его содержимое:

@import url("main_style.css");
@import
url("mobile.css");
@import
url("desctop.css");


если main_style.css большой по размеру и с него дергается куча стилей которые войдут в mobile.css, то думаю ничего не изменится.

Принцип работы такой логики вот в чем:
нужный файл css подгрузится ТОЛЬКО, если на странице используются имеющиеся на ней стили


--------------------
Если долго в одних стенах живешь, ты с ними сростаешься
PMПисьмо на e-mail пользователю
    1   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
sergeiss  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Сидел он, дум великих полон - и вдаль глядел
******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 14966
Пользователь №: 4190
На форуме: 8 лет, 9 месяцев, 27 дней
Карма: 443




maximka787, мне кажется, тут надо в целом немного перестроить структуру загрузки данных.
Как вообще грузится страница? Сначала полностью загружается HTML. Браузер начинает его показывать (с некоторой задержкой), одновременно подгружая файлы стилей и JS. По мере подгрузки стилей они применяются. И совершенно естественно, что при медленном соединении сначала будет показан "кривой" HTML, затем к нему будет применен первый набор стилей, а затем второй.

Я предлагаю вообще изменить всё. Сначала грузи одну простейшую страницу, которая содержит ссылку на единственный и мелкий файл JS. Он определяет, какое устройство у тебя используется и грузит для него только те стили, что нужны. Остальные вообще не грузятся. После чего грузится нужный файл HTML, который прописывается внутри body. За счет загрузки только нужных данных будет уменьшено время загрузки.
В самом начале загрузки можно (средствами JS) показать какой-нибудь индикатор загрузки. А по окончании загрузки у тебя будет сразу показана правильная страница.
Плюс к этому, используй минификатор и для CSS, и для JS. Это еще больше ускорит загрузку.
Ну и кэш HTML, при правильном использовании, также ускорит все последующие загрузки smile.gif


--------------------
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
PMICQ
    1   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Stave  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Старик
***

Профиль
Группа: Пользователь
Сообщений: 138
Пользователь №: 40254
На форуме: 2 года, 2 месяца, 29 дней
Карма: 4




Ещё наличие нестандартных шрифтов тупит, если они весят много


--------------------
Если долго в одних стенах живешь, ты с ними сростаешься
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
maximka787  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 1228
Пользователь №: 2705
На форуме: 9 лет, 3 месяца, 26 дней
Карма: 1




Всем спасибо за поддержку. Пробовал эти методы и изменял их. В итоге, внезапно решилась проблема. Надо было media условие прописать внутри css файлов, а не в <link>.


--------------------
..Работает - не трогай!
PM
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса