注册页面输入框无法放大及响应式适配问题求助
问题描述
我已有一个登录界面,正在开发注册界面,但无法将注册页面的input输入框调整至与登录页面相同或相近的尺寸;同时我正尝试实现完全响应式布局,怀疑这是导致输入框无法放大的原因。
登录界面截图:
以下是已开发的注册页面代码:
cadastro.html
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cadastro - Tradlibras</title> <link rel="stylesheet" type="text/css" href="css/cadastro.css" media="screen" /> <script src="Js/redirecionamento.js"></script> </head> <body> <div class="fundo"> <h1 id="bem_vindo">Cadastrar-se</h1> <div> <input type="text" placeholder="Digite o seu nome" class="inputs"> </div> <div> <input type="email" placeholder="Digite seu email" class="inputs"> </div> <div> <input type="password" placeholder="Digite sua Senha" class="inputs"> </div> <div> <input type="password" placeholder="Digite sua Senha novamente" class="inputs"> </div> <br> <div> <input type="checkbox" id="check_termos"> <label for="check_termos" id="text_termos">Você aceita os <a href="#" id="termos_de_uso">termos de uso</a></label> </div> <div id="botao_cadastrar_container"> <button onclick="mudar_pagina('./index.html')" type="button" class="botoes">Cadastrar novo Usuário</button> </div> </div> </body> </html>
cadastro.css
body { background-image: url('../img/Bem vindo ao Tradlibras.png'); background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: Arial, sans-serif; } .fundo { background-color: rgba(0, 0, 0, 0.7); padding: 30px; /* Ajustado para combinar com o padding do login */ border-radius: 20px; width: 90%; max-width: 600px; /* Ajustado para combinar com o max-width do login */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; align-items: center; text-align: center; } .fundo h1 { color: white; font-size: 2em; /* Ajustado para combinar com o font-size do login */ margin-bottom: 20px; /* Ajustado para combinar com o margin-bottom do login */ } .fundo input[type="text"], .fundo input[type="email"], .fundo input[type="password"] { width: 90%; /* Ajustado para combinar com a largura dos inputs do login */ padding: 10px; /* Ajustado para combinar com o padding dos inputs do login */ margin: 10px 0; /* Ajustado para combinar com a margin dos inputs do login */ border: none; border-bottom: 2px solid #ffffff; background-color: transparent; color: white; font-size: 1em; /* Ajustado para combinar com o font-size dos inputs do login */ } #text_termos { color: white; font-size: 0.9em; /* Ajustado para combinar com o font-size do link "Esqueci a senha" */ margin-bottom: 20px; } #termos_de_uso { color: #1a73e8; /* Cor do link para termos de uso */ text-decoration: none; } #botao_cadastrar_container { width: 100%; display: flex; justify-content: center; margin-top: 20px; margin-bottom: 20px; } .botoes { width: 70%; max-width: 300px; /* Ajustado para combinar com o max-width do botão do login */ padding: 10px; /* Ajustado para combinar com o padding do botão do login */ border: none; background-color: #1a73e8; color: white; font-size: 1.2em; /* Ajustado para combinar com o font-size do botão do login */ border-radius: 25px; cursor: pointer; } .botoes:hover { background-color: #155cb0; } ::placeholder { color: white; opacity: 1; } /* Responsividade */ @media (max-width: 768px) { .fundo { width: 100%; padding: 20px; border-radius: 15px; } #Txt_login { font-size: 2em; } #btn_telaLogin_cadastrar { top: 10px; right: 10px; } } @media (max-width: 480px) { #Txt_login { font-size: 1.8em; } #botao_login { width: 80%; font-size: 1em; } #btn_telaLogin_cadastrar { padding: 8px 15px; font-size: 0.9em; } }
内容的提问来源于stack exchange,提问作者JOAO PEDRO MATARELLI
相关产品推荐
相关产品推荐

