我已经设置了一个页面,下面有@media
查询,可以为移动访客调整大小:
@media all and (max-width: 600px) {
#survey-container {
width: 100%;
font-size: 8px;
}
.input-field {
width: 85px;
}
.input-select {
width: 85px;
}
}
@media all and (max-height: 800px) {
#survey-container {
min-height: 100%;
}
}
input-field
类附有所有input
标签,类型为number
,text
或email
,而input-select
用于下拉输入。但是,我对Age的输入并不遵循@media
的input-field
样式,如下所示:
可以看出,Age的字段与其他字段的大小不同,尽管由同一类input-field
设计。
奇怪的是,我可以将字段的width
设置为75px
,它们甚至会出来,但我不希望它们是75px
。此外,通过将input-type
从number
更改为text
,它们的大小都是85px
,但是Age输入必须是number
,因此不能使用该解决方案。
尝试使用:
#survey-container input[type="text"],
#survey-container input[type="email"],
#survey-container input[type="number"],
#survey-container input[type="select"]{
width: 85px;
}