利用媒体查询创建动态语音气泡

Question

我有一个容器div，用来创建一个指向右边的语音气泡，如下所示：

.container {
width: 90%;
height: auto;
padding: 10px;
position: relative;
border-radius: .4em;
}
.container:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 0.813em solid transparent;
border-left-color: #ffffff;
border-right: 0;
border-top: 0;
margin-top: -0.406em;
margin-right: -0.812em;
}

当屏幕小于700px时，我需要应用以下CSS，它会创建一个向下而不是向右的指针：

.container:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 0.813em solid transparent;
border-top-color: #ffffff;
border-bottom: 0;
border-right: 0;
margin-left: -0.406em;
margin-bottom: -0.812em;
}

这就是我试图实现这一目标的方式，但演讲泡沫似乎没有反应。

@media(max-width:700px) {
.container:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 0.813em solid transparent;
border-top-color: #ffffff;
border-bottom: 0;
border-right: 0;
margin-left: -0.406em;
margin-bottom: -0.812em;
}
}

如果我将该代码直接应用于.contator：在媒体查询之外，它会完美地显示，但我似乎无法使用媒体查询在两种类型的语音气泡之间切换。我猜这是一个语法错误，我需要针对div ID而不是类吗？ID是chat_bubble，这是一支代码笔。

https://codepen.io/TheNomadicAspie/pen/JjWVbKJ

Answer 1

您的媒体查询运行良好；"问题"；对于您的代码，您的默认样式(媒体查询之外(也适用于媒体查询中的部分，因此在700px视口下，您的:after元素既有top: 50%属性，也有bottom: 0属性，left和right属性也是如此，这就是为什么您无法看到您的语音气泡三角形，例如，可以通过将top和right属性设置为unset来解决此问题。否则，另一个解决方案是创建另一个媒体查询，该查询将应用700像素及以上，并具有默认的伪元素样式

`@media(min-width:700px) {
...
}`

这样你的元素属性就不会"；"重叠"；彼此