2

Olá, tenho um layout que se assemelha a este

Layout desktop

Uso o Bootstrap nele.. Ao atingir um determinado breakpoint ele recebe um formato semelhante a este

Layout - mobile

Eu quero fazer o seguinte efeito, quando o layout receber a formatação demonstrada na segunda imagem, aquelas boxes verdes devem se tornar links (na versão desktop os links são apenas pequenos textos ali)..

Eu pensei em 3 possibilidades, a primeira seria usando CSS, que seria assim: Quando o layout chegar no breakpoint eu removo a formatação do "lado de fora" da caixa (div) e aplico ela neste link, usando media queries..

A segunda possibilidade seria usando Javascript (ou jQuery), onde eu uso um if para checar o .width() do document, se for do tamanho do breakpoint eu uso um .wrap() ou algo do tipo para transformar as caixas em links.

A terceira seria usando CSS também, onde eu adiciono duas vezes o mesmo conteúdo, um para mobile (com as caixas como links) e outro para desktop (que é o padrão mostrado na 1ª imagem) e ao chegar no breakpoint eu escondo um e mostro o outro..

Levando em consideração compatibilidade com os browsers (desktop e mobile), qual seria a melhor opção? Vocês tem outras ideias de como fazer isso?

2 Respostas 2

2

Dá uma olhada neste post aqui...

Nele você vai aprender a fazer isso tudo utilizando os mesmos elementos em ambas as versões, sem ter que duplicar o conteúdo.

Ele é curto e dividido em 3 passos bem definidos: viewport, estrutura e queries.

Para desativar o link, por exemplo, basta utilizar o "pointer-events: none;" (já citado pelo Sergio) dentro da respectiva querie.

Tudo isso sem duplicar conteúdo e sem Javascript.

2

Sem ver o seu CSS acho que a melhor opção é ter sempre links. Na versão desktop impede os clics na versão mobile: já lá estão.

Pode acrescentar isto ao CSS (para o desktop) desses elementos:

pointer-events: none;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .