Можно ли использовать jQuery для адаптивного веб-дизайна?

11

Мне было поручено обновить сайт, чтобы он был адаптивным и корректно отображался на смартфонах. К сожалению, с сайтом в его нынешнем виде не очень легко работать - я не могу просто изменить CSS.

Считается ли плохим определять размер браузера и вносить изменения в CSS с помощью jQuery?

Например:

if ($(window).width() < 960) {
    //make heaps of CSS changes 
}
css mobile jquery optimization responsive-webdesign MeltingDog
источник
7
Вы должны рассмотреть возможность использования медиа-запросов вместо этого, потому что это рекомендуемый стандарт W3C с июня 2012 года.
Zistoloen
Вы хотите изменить таблицы стилей? Я тоже так думал, но мне все равно придется изменить множество элементов
MeltingDog
Да. В любом случае, я думаю, у вас будет много изменений CSS.
Зистолоен
2
За предложением «Мне было поручено обновить сайт, чтобы он стал отзывчивым» не следует после слова «Я не могу просто изменить CSS»
Francisco Presencia
4
все нужно больше jQuery ( Отказ от ответственности: не принимайте это всерьез )
Darkhogg

Ответы:

13

Конечно. Очевидно, что было бы лучше использовать только CSS, но если вы не можете, используйте то, что у вас есть. Делайте как можно больше с CSS и используйте JS по мере необходимости. Не знаю, почему вы не можете изменить существующий CSS, но вы можете добавить таблицу стилей с помощью JS.

(function() {
  //create a new element
  var newStyle = document.createElement("link");

  //set the required attribute for a valid css file
  newStyle.rel = "stylesheet";
  newStyle.href = "http://example.com/the/location/of/your/css/stylesheet.css";

  //and then append it to the <head>
  document.getElementsByTagName("head")[0].appendChild(newStyle);
})();

Источник: http://christian-fei.com/add-stylesheets-after-the-head-using-javascript/

затем сходите с ума от CSS / медиа-запросов.

Или с помощью jQuery:

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">');

Я сделал адаптивные «скины», где некоторые вещи просто невозможно было сделать без смены DOM. Если у вас нет доступа к HTML, манипуляции с JS DOM иногда являются единственным ответом.

РЕДАКТИРОВАТЬ:
В зависимости от визуальных требований вашей версии для небольшого экрана, вы можете быть удивлены тем, насколько далеко этот фрагмент CSS поможет вам перейти к «дружественному мобильному».

/* hopefully the original CSS developer didn't include a bunch of !importants.*/
div, p, ul, table, img {
    float: none !important;
    max-width: 96% !important; /* breathing room on the sides */
    margin-left: auto
    margin-right: auto; 
}

Если первоначальный разработчик CSS слишком любил !importantи вы не можете найти HTML, вы можете использовать jQuery / JS, чтобы добавить идентификатор в тело или контейнер высокого уровня и добавить его в свой селектор.

   #i-will-beat-you-important div,
   #i-will-beat-you-important p,
   #i-will-beat-you-important ul { 
        float: none !important; 
        ...
   }
Будет
источник
Из моего опыта адаптивный дизайн может быть сделан только с помощью CSS. Как только ваш дизайн также должен стать адаптивным, вам, вероятно, также понадобится Javascript. Имейте в виду, что вы хотите, чтобы JavaScript был минимально возможным.
Марко
4

Я бы сказал, попробуйте сначала использовать медиа-запросы. Один метод, который я нашел более простым, когда имел дело с дизайном, который изначально был только для настольных компьютеров, заключался в следующем:

Начните с двух отдельных таблиц стилей. Один для нового адаптивного дизайна, а другой для старой настольной версии:

<link rel="stylesheet" media="screen and (max-width: 959px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 960px)" href="css/desktop.css">

Все старые стили могут содержаться в desktop.css . Тем временем вы можете начать с нуля в mobile.css . Вы можете обнаружить, что в этом мобильном CSS можно создать красивую разметку из одного столбца, которая работает и для планшетов.

Этот подход позволяет вам начать все с нуля, и вы можете разрабатывать стили специально для мобильных телефонов и планшетов, не используя при этом настольные стили, которые переопределяют вещи. Вы можете скрыть / показать / позиционировать элементы, как требуется только для мобильных устройств.

Если вам действительно нужно изменить код рабочего стола, чтобы он работал с мобильными и настольными компьютерами, вы можете реорганизовать разметку. В качестве альтернативы, если вы обнаружите, что не можете реально реорганизовать HTML как для адаптивной, так и для мобильной версий, вы можете поместить класс в код рабочего стола, например, класс «рабочий стол», и использовать CSS в мобильной версии, чтобы скрыть его. Затем напишите новый HTML-код для этого раздела и дайте ему class="mobile". Затем стилизуйте его в mobile.css и спрячьте в desktop.css .

lightspeeder
источник
3

Я работал на сайте, который использовал этот метод, и у меня были проблемы с поворотом экрана на мобильных устройствах. Поскольку JavaScript будет обнаруживать только один раз при загрузке страницы, если пользователь поворачивает устройство, он не будет расширяться до полной ширины, как это происходит с медиа-запросами. В то время мне было проще просто переключиться на CSS, но, возможно, специалист по JS узнает, есть ли способ обнаружить изменение ширины области просмотра. Похоже, что с AJAX должен быть выход, но я бы поспорил, что все, что вы обнаружите, будет чрезмерным, если речь идет о производительности, как описывает Megasteve.

Стефания
источник
2

Отзывчивость и «правильно отображаться на смартфонах» - это совершенно разные задачи.

  1. Предположительно, отзывчивость относится к устранению - где это возможно - дополнительных обращений к серверу. Проверка ошибок, Ajax для получения запрошенных данных и динамические манипуляции с DOM - это задачи, которые обычно улучшают скорость отклика. Использование JavaScript (или JavaScript Framework) является эффективным способом сделать это. За последние несколько лет я перешел с JavaScript на jQuery для этих реализаций. Во многих случаях jQuery имеет встроенную совместимость с браузером, что имеет очевидные преимущества. Плагины для выбора даты, автозаполнения и меню экономят часы разработки.

Это не должно быть основным источником стайлинга. Это работа CSS. Тем не менее, оба могут быть использованы вместе эффективно. В простом примере текст может быть оформлен по-разному в зависимости от результатов какого-либо действия. jQuery может быть использован для изменения CSS-класса. 

$('#result').removeClass('red').addClass('green');
  1. Соблазнительно попробовать повторно использовать стандартную страницу для мобильных устройств, динамически меняя стиль. Мой опыт показывает, что это дает неудовлетворительное решение. CSS совершенно другой, и для использования мобильных функций требуются различные сценарии на стороне клиента. Я предпочитаю создавать отдельные выделенные HTML-страницы, а не одну страницу, требующую логики для выбора стиля или функций, которые будут использоваться.
Стефани Перри
источник
Спрашивающий упомянул «Отзывчивый веб-дизайн» ( en.wikipedia.org/wiki/Responsive_web_design ), который относится к проектированию для разных размеров экрана и возможностей. Хотя это не характерно для телефонов, это стало огромным фактором для продвижения этой техники на передний план.
Джейкоб Хьюм
1

Раньше мы использовали популярный CSS-фреймворк 960.gs для наших сайтов.

Мы хотели сделать его отзывчивым.

Кто-то создал JS-плагин для 960 gs, поэтому мы подумали, почему бы не использовать его, так как нам не нужно было бы вносить какие-либо изменения в шаблоны структурных сайтов.

Это работало, но в большинстве браузеров, в том числе и в хороших, оно отставало. Как правило, вы получаете «флэш-контент нестандартного формата», который сильно зависит от сложности страницы.

Несмотря на то, что решения JS работают, они не идеальны, медиа-запросы CSS 3 - лучший выбор, если это возможно. В конце мы просто переделали шаблоны нашего сайта с помощью Twitter Bootstrap, который очень хорошо подходил для наших нужд.

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

megasteve4
источник