Posso usar o jQuery para um design responsivo da web?

11

Fui encarregado de atualizar um site para torná-lo responsivo e aparecer corretamente em smartphones. Infelizmente, o site em sua forma atual não é muito fácil de trabalhar - não posso simplesmente mudar o CSS.

É considerado ruim detectar o tamanho do navegador e fazer alterações no CSS com o jQuery?

Por exemplo:

if ($(window).width() < 960) {
    //make heaps of CSS changes 
}
css mobile jquery optimization responsive-webdesign MeltingDog
fonte
7
Você deve considerar usar consultas de mídia em vez porque é um padrão recomendado pela W3C desde Junho de 2012.
Zistoloen
Você quer mudar as folhas de estilo? Pensei isso também, mas eu ainda teria que alterar uma série de elementos
MeltingDog
Sim. De qualquer forma, acho que você terá muitas alterações de CSS.
Zistoloen
2
A frase "Eu fui encarregado de atualizar um site para torná-lo sensível" não deve ser seguido por "Eu não pode simplesmente mudar o CSS"
Francisco Presencia
4
tudo precisa de mais jQuery ( Disclaimer: não levar isso a sério )
Darkhogg

Respostas:

13

Certo. Obviamente, seria melhor usar CSS sozinho, mas se você não puder, use o que possui. Faça o máximo possível com CSS e use JS, conforme necessário. Não sei por que você não pode alterar o CSS existente, mas pode adicionar uma folha de estilos com 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);
})();

Fonte: http://christian-fei.com/add-stylesheets-after-the-head-using-javascript/

depois enlouqueça com as consultas CSS / mídia.

Ou com jQuery:

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

Eu fiz 'skins' responsivas, onde algumas coisas simplesmente não eram possíveis sem alterar o DOM. Se você não tem acesso ao HTML, a manipulação do JS DOM às vezes é a única resposta.

EDIT:
Dependendo dos requisitos visuais da sua versão de tela pequena, você pode se surpreender com a distância que esse snippet CSS levará ao longo do caminho para 'dispositivos móveis'.

/* 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; 
}

Se o desenvolvedor original do CSS gostava demais !importante você não pode acessar o HTML, pode usar o jQuery / JS para adicionar um ID ao corpo ou ao contêiner de alto nível e adicioná-lo ao seu seletor.

   #i-will-beat-you-important div,
   #i-will-beat-you-important p,
   #i-will-beat-you-important ul { 
        float: none !important; 
        ...
   }
Vai
fonte
Da minha experiência, o design responsivo pode ser feito apenas com css. Assim que seu design também precisar se adaptar, você provavelmente também precisará de Javascript. Lembre-se de que deseja manter o javascript o mínimo possível.
Marco Marco
4

Eu diria que tente usar as consultas de mídia primeiro. Um método que achei mais fácil ao lidar com um design originalmente originalmente para desktop era o seguinte:

Comece com duas folhas de estilo separadas. Um para o novo design responsivo e o outro para a versão antiga da área de trabalho:

<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">

Todos os estilos antigos podem estar contidos no desktop.css . Enquanto isso, você pode começar do zero no mobile.css . Você pode achar que pode criar um bom layout de coluna única nesse CSS móvel que também funciona para tablets.

Essa abordagem permite que você tenha um novo começo e possa criar estilos específicos apenas para celulares e tablets e não ter os estilos de desktop aparecendo e substituindo coisas. Você pode ocultar / mostrar / posicionar elementos conforme necessário apenas para dispositivos móveis.

Se você realmente precisar alterar o código da área de trabalho para fazê-lo funcionar com dispositivos móveis e computadores, refatorar a marcação. Como alternativa, se você achar que não pode refatorar realisticamente o HTML para as versões responsiva e móvel, pode colocar uma classe no código da área de trabalho, por exemplo, classe "desktop" e usar CSS na versão móvel para ocultá-la. Em seguida, escreva um novo HTML para essa seção e dê a class="mobile". Em seguida, estilize- o de acordo com mobile.css e oculte-o em desktop.css .

lightspeeder
fonte
3

Eu trabalhei em um site que usava esse método e tive problemas com a rotação da tela em dispositivos móveis. Como o JavaScript detectará apenas uma vez no carregamento da página, se o usuário girar o dispositivo, ele não será expandido para toda a largura da mesma forma que nas consultas de mídia. Era mais fácil para mim naquele momento apenas mudar para CSS, mas talvez um especialista em JS saiba se existe uma maneira de detectar uma alteração na largura da janela de exibição. Parece que deveria haver uma maneira com o AJAX, mas eu estaria disposto a apostar que qualquer coisa que você encontrasse seria um exagero no desempenho, como descreve a megasteve.

stephanie
fonte
2

A capacidade de resposta e "aparecem corretamente em smartphones" são tarefas completamente diferentes.

  1. Presumivelmente, a capacidade de resposta se refere à eliminação - sempre que possível - de ida e volta extra ao servidor. A verificação de erros, o Ajax para recuperar os dados solicitados e a manipulação dinâmica do DOM são as tarefas que normalmente melhoram a capacidade de resposta. O uso de JavaScript (ou estrutura JavaScript) é uma maneira eficaz de fazer isso. Nos últimos anos, mudei do JavaScript para o jQuery para essas implementações. Em muitos casos, o jQuery possui compatibilidade de navegador integrada, o que apresenta vantagens óbvias. Os plugins para datepicker, preenchimento automático e menus economizam horas de desenvolvimento.

Não deve ser a principal fonte de estilo. Esse é o trabalho do CSS. No entanto, os dois podem ser usados ​​juntos de forma eficaz. Em um exemplo simples, o texto pode ter um estilo diferente, dependendo dos resultados de alguma ação. O jQuery pode ser usado para alterar a classe definida pelo CSS. 

$('#result').removeClass('red').addClass('green');
  1. É tentador tentar reutilizar uma página padrão para celular alterando dinamicamente o estilo. Minha experiência é que ele fornece uma solução insatisfatória. O CSS é completamente diferente e é necessário um script do lado do cliente para aproveitar os recursos móveis. Minha preferência é criar páginas HTML dedicadas separadas, em vez de uma página que exija lógica para selecionar o estilo ou as funções a serem usadas.
stephanie perry
fonte
O questionador mencionou "Design responsivo da web" ( en.wikipedia.org/wiki/Responsive_web_design ), que se refere ao design para diferentes tamanhos e recursos de tela. Embora não seja específico para telefones, esse foi um grande fator para trazer essa técnica à vanguarda.
Jacob Hume
1

Costumávamos usar a popular estrutura 960.gs css para nossos sites.

Queríamos torná-lo responsivo.

Alguém havia feito um plug-in responsivo baseado em JS para os 960 gs, então pensamos em feno por que não apenas usá-lo, pois não precisaríamos fazer nenhuma alteração nos modelos estruturais do site.

Funcionou, mas estava atrasado na maioria dos navegadores, incluindo os bons. Você normalmente recebe um 'flash de conteúdo sem estilo' que varia muito dependendo da complexidade da página.

Apesar das soluções JS funcionarem, elas não são ideais, consultas de mídia CSS 3 são a melhor opção, se possível. No final, refizemos nossos modelos de sites usando o Twitter Bootstrap, o que era muito bom para nossas necessidades.

Embora possa ser interessante fazer atalhos, muitas vezes acaba sendo mais demorado / doloroso a longo prazo.

megasteve4
fonte