Html CSS Flexbox输入无响应

我是flexbox和css的新手。我需要一些帮助来让这段代码正常工作。 问题在于，我无法使输入、文本区域和按钮响应。 我需要它们在普通电脑页面上的宽度大小，但在移动设备上要更小、响应更快。 任何建议都可以帮助我。 非常感谢

。电子邮件{
填充：0.5%0%0.5%0%；
显示器：flex；
对齐项目：居中；
柔性流动：柱；
}
.email>div{
保证金：10px 0px 10px 0px；
}
输入{
填充：15px；
宽度：402px；
最大宽度：402px；
框大小：边框框；
边框：1px实心#2725255；
字体大小：小；
}
：：占位符{
字体大小：14px；
不透明度：1；
}
文本区{
填充：15px；
宽度：402px；
调整大小：垂直；
字体大小：小；
边框：1px实心#2725255；
}
.按钮发送{
宽度：434px；
高度：40px；
背景色：黑色；
颜色：白色；
字体大小：15px；
字体大小：小；
}

邮寄

在这种情况下，您需要专门为小屏幕大小更改CSS值，但为另一屏幕大小保留特定值，然后需要使用媒体查询

那么首先什么是媒体查询

媒体查询由媒体类型和零个或多个表达式组成，用于检查特定媒体功能的条件

我建议通读这份文件，更好地理解媒体查询的真正含义

但在回答您的问题时，您希望添加这样的响应文本区域（您也可以使用

max width

，将所有宽度更改为100%，并将

max width

设置为当前的

width

）

。电子邮件{
填充：0.5%0%0.5%0%；
显示器：flex；
对齐项目：居中；
柔性流动：柱；
}
.email>div{
保证金：10px 0px 10px 0px；
}
输入{
填充：15px；
宽度：402px；
最大宽度：402px；
框大小：边框框；
边框：1px实心#2725255；
字体大小：小；
}
：：占位符{
字体大小：14px；
不透明度：1；
}
文本区{
填充：15px；
宽度：402px；
调整大小：垂直；
字体大小：小；
边框：1px实心#2725255；
}
.按钮发送{
宽度：434px；
高度：40px；
背景色：黑色；
颜色：白色；
字体大小：15px；
字体大小：小；
}
@全部和全部介质（最大宽度：500px）{
文本区，.按钮发送，输入{
宽度：100%；
}
}

邮寄

您可以在Css中添加@media querys，正如我在下面为您所做的那样：-

单击运行代码片段，然后单击完整页面e，缩小窗口并检查它

。电子邮件{
填充：0.5%0%0.5%0%；
显示器：flex；
对齐项目：居中；
柔性流动：柱；
}
.email>div{
保证金：10px 0px 10px 0px；
}
输入{
填充：15px；
宽度：402px；
最大宽度：402px；
框大小：边框框；
边框：1px实心#2725255；
字体大小：小；
}
：：占位符{
字体大小：14px；
不透明度：1；
}
文本区{
填充：15px；
宽度：402px；
调整大小：垂直；
字体大小：小；
边框：1px实心#2725255；
}
.按钮发送{
宽度：434px；
高度：40px；
背景色：黑色；
颜色：白色；
字体大小：15px；
字体大小：小；
}
@仅介质屏幕和（最大宽度：600px）{
输入{
宽度：200px；
最大宽度：200px；
}
文本区{
宽度：200px；
最大宽度：200px；
}
钮扣{
宽度：200px；
最大宽度：200px；
}
}

邮寄

删除所有固定像素宽度，改用百分比。