1

Tenho esse projeto mais avançado , porem deixei ele liso para poder facilitar a visualização e para vocês me ajudarem =D , tentei de tudo possível usando o media queries porem nada, quero que a janela se ajuste em qualquer tela e o problema maior estar no leitor do pdf que não arrasta com nada, meu css não é la essa coisas ai complica.

Se eu colocar o codigo todo aqui vai ficar enorme, então disponibilizei no github, agradeço desde ja.

https://github.com/rodrigoscsx/PROJETO?

4
  • 2
    Cara. Te falar que responsividade não é muito uma coisa que você pega no final assim e joga em cima. Seu projeto parece estar trabalhado de uma forma muito trancada já. A melhor forma de fazer algo responsivo é ir pensando nisso desde o início. Não é a toa que existe o termo "mobile first". Commented 15/03/2017 às 19:29
  • 1
    Eu concordo em tudo que o Leon Freire disse. Mobile first!!! A parte boa é que você pode usar frameworks que fazem o trabalho: Bootstrap, Foudation, Cardinal, Pure, etc. Além disso, seu layout deve ser fluido (usar proporções - %, vw, vh, etc. - mais do que medidas absolutas - px, pt, etc. Commented 15/03/2017 às 19:36
  • sim sim verdade @LeonFreire porem eu entrei no projeto depois ai fiquei com o pepino de resolver o responsivo, e o layout teria que ser assim. è capaz de mudar ainda? Commented 15/03/2017 às 19:53
  • Teria que ter um CSS forte aí. Primeira coisa que eu percebi quando abri o index.html é que está cheio de position: fixed. Isso é horrível pra responsividade. Se quiser manter assim, você vai ter que retirá-los pelo menos nos media queries e trabalhar mais com float e com as medidas citadas acima. Exemplo: Você falou do iframe que não se mexe. Mas teu #contentMeioiFrame está com position: fixed; e left: 250px; Commented 15/03/2017 às 20:00

1 Resposta 1

1

Bem, o meu comentário ficou grande demais, então eu vou deixá-lo aqui.

É possível sim. Mas comece com o mobile, depois telas cada vez maiores, até o desktop (que já existe no sue caso, aparentemente). Defina o layout que você quer e preste atenção no range de definições (320×240 até 640×960).

Use as media queries apropriadamente. Eu não vou escrever nenhuma aqui, mas saiba que o CSS Tricks (mais que recomendado) já tem todos os snippets mais usados.

!!! Preste atenção !!!

  1. Alguns elementos do seu site simplesmente não vão existir na versão mobile, você tem que removê-los, seja por falta de espaço ou por outro fator, e isso está okay!

1.1 Pense em como o menu vai ser mostrado. Veja esse exemplo do CSS Tricks

  1. A versão mobile é sempre aquela que oferece um toque de botão, nada mais (figurativo), não deixa o cliente pensar (don't make me think principle) E.g.: Se as funcionalidades do site estão numa área que precisa de login, mostre o login logo de cara, não precisa mostrar o slider, por exemplo.

  2. Pesquise por plugins para facilitar seu serviço. Existem muitos como o Isotope

Tip: Escreva o CSS para cada tipo de tela que você quer suportar em arquivos .CSS separados, isso vai ajudar na manutenção.

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 .