2014-09-24 2 views
0

Я бы хотел создать мобильную версию моего приложения, не используя bootstrap (который используется в настольной версии) Упростите, я не хочу загружать таблицы стилей загрузки по разрешению меньше 768 пикселей.Отключить бутстрап для небольшого разрешения

Возможно ли это?

+0

Dont хотите загрузить или доцент хотите применить стили? – Sudheer

+0

Что-то вроде [этого] (http://css-tricks.com/resolution-specific-stylesheets/)? –

ответ

0

Посетите http://getbootstrap.com/customize/ и из настроек отключите часть Bootstrap, которую вы не хотите использовать!

Другим решением может быть использование только кода загрузочного файла bootstrap.css, который вы хотите редактировать вручную! Например, удалите всю часть, где он говорит @media .... это удалит все модификации стиля для меньших экранов, а также сделает ваш файл bootstrap.css меньше, что ускорит время загрузки вашей страницы!

Надеюсь, что это решение поможет!

0

Во-первых: Если вы загружаете bootstrap css внутри <head> вашего документа, вы должны удалить его. Это поможет вашему браузеру быстрее загружать вашу страницу ... вместо того, чтобы остановить процесс рендеринга, чтобы сделать HTTP-вызов для загрузочного буфера REQUEST, а затем дождаться загрузки Bootstrap CSS с вашего сервера или CDN, чтобы завершить синтаксический анализ вашего DOM.

Вместо этого вы должны загрузить CSS в конце файла и просто попросить, чтобы загрузить его только если ваш размер экрана меньше, чем 768px :)

Я надеюсь, что это поможет ...

<script> 
(function(){ 
    var screenSize = window.innerWidth; 
    if(screenSize>768) { 
     var bootstrapStyles = document.createElement('link'); 
     bootstrapStyles.setAttribute('rel','stylesheet'); 
     bootstrapStyles.href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"; 
     document.head.appendChild(bootstrapStyles); 
    } 
})(); 
</script> 
Смежные вопросы