Ir para conteúdo
Fórum Script Brasil
  • 0

Um css para o laptop, outro para o celular e mais um para o tablet


Frank K Hosaka

Pergunta

arquivo appView.php
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, 
    maximum-scale=1.0, user-scalable=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
  rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
  @media (min-width: 768px) { .geral {width: 700px; margin: auto; font-size: 16px} }
  @media (max-width: 767px) { body {width: 630px; margin: auto; font-size: 16px}  }
  @media (min-width: 768px) and (max-width:1024px) { body {width:700px;margin: auto; font-size: 16px}}
  input[type="date"]::-webkit-calendar-picker-indicator {display: none}
  summary { list-style:none }
</style>
<title>Projeto Classe</title>
<body class=geral>

Esse código é uma tremenda aberração. Eu não queria criar a classe "geral" para formatar o laptop, mas esse é o único jeito que eu encontrei para centralizar a renderização no meio da tela. Se eu escrever body no lugar do .geral, tudo fica encostado na esquerda. Apesar do código não respeitar a lógica, consegui definir o body do celular para 630px e do tablet para 700 px. A minha intuição me diz que o mais sensato é esquecer o laptop, o tablet e o celular, e montar todo o código baseado numa só classe, assim <body class="w-[630px] m-auto"> no jargão da Tailwind. O duro é ter que mexer num monte de views que foram projetados para 700 pixels.

Editado por Frank K Hosaka
Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...