html - CSS 在类似元素上的工作方式不同
问题描述
每个人。我正在开发一个 Node/Express + Jade 应用程序。我对登录和注册页面使用了相同的样式。页面的 CSS 如下所示:
.form-page {
background-color: #000000;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 70%;
height: 100%;
}
.form form .form-input {
width: 100%;
height: 35px;
background-color: #505050;
margin-bottom: 10px;
border: none;
padding-left: 10px;
font-size: 16px;
color: #FFFFFF;
}
.form form {
margin-top: 20px;
width: auto;
}
.form .form-header {
font-size: 50px;
color: #FFFFFF;
}
.form .form-header .logo {
color: #505050;
}
form .btn-action {
background-color: #505050;
color: #FFFFFF;
width: 100px;
height: 35px;
border: none;
font-family: IBM Plex Mono;
font-size: 15px;
margin-top: 10px;
font-weight: lighter;
}
form .btn-action:hover {
background-color: transparent;
color: #FFFFFF;
border: 2px solid #505050;
cursor: pointer;
}
.form .alternative {
font-size: 16px;
color: #D3D3D3;
margin-top: 10px;
}
.form .alternative .alternative-link {
color: #FFFFFF;
}
Jade 模板如下所示: register.pug(注册页面)
doctype html
html
head
title Register | Diode
meta(name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no')
link(rel='stylesheet' type='text/css' href='/css/diode.css')
body.form-page
.form(align='center')
p.form-header Register |
span.logo Diode
form(method='post' action='/users/register')
input.form-input(placeholder='Your first name' name='firstname' type='text' required)
input.form-input(placeholder='Your last name' name='lastname' type='text' required)
input.form-input(placeholder='Your email address' name='email' type='email' required)
input.form-input(placeholder='Your username' name='username' type='text' required)
input.form-input(placeholder='Your password' name='password' type='password' required)
input.form-input(placeholder='Confirm your password' name='confirmpassword' type='password' required)
button.btn-action(type='submit') Register
p.alternative Already have an account?
a.alternative-link(href='/users/login') Log In.
和 login.pug(登录页面)
doctype html
html
head
title Login | Diode
meta(name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no')
link(rel='stylesheet' type='text/css' href='/css/diode.css')
body.form-page
.form(align='center')
p.form-header Log In |
span.logo Diode
form(method='post' action='/users/login')
input.form-input(placeholder='Your username' name='username' type='text' required)
input.form-input(placeholder='Your password' name='password' type='password' required)
button.btn-action(type='submit') Log In
p.alternative Don't have an account?
a.alternative-link(href='/users/register') Sign up.
问题是,笔记本电脑屏幕上表单输入的宽度在登录页面上比在注册页面上小,但在移动设备上却相同。我如何使它们的大小相同。请注意,下面的图像具有不同的尺寸,这使得它们看起来相似。
解决方案
推荐阅读
- python - Python在不改变提示的情况下激活虚拟环境
- python - 当变量的值不在列表中时,如何运行循环?
- php - 使用数组索引显示前 5 个数组元素
- mysql - How to write MYSQL query with GROUP BY Clause for HOUR where if NO data for particular hour, Return 0
- android - 在 Android 的后台服务中获取蓝牙 BLE 状态
- python - 如何修复:TypeError:无法腌制选择器对象
- arrays - 如何附加引号使其成为字符串数组?
- postgresql - 如何通过命令提示符备份或导出 Postgres 数据库
- mysql - 字符串操作 W3Resources
- html - 图像悬停样式无法实现