Css重置小于320px

Question

我正在为每一个可能性做出响应式设计，而我想要实现的是一个媒体查询，当屏幕宽度小于320时，删除所有的样式/ javascript /图像并简单地将<h1> <h6>和<p>设为带有白色背景的纯黑色文字？

这是可以做到的吗？

这是我到目前为止所拥有的： CSS：

div.alert{
  height:100px;
  width: 100%;
  background-color:#f3fb9c;
  color: #000000;
  display:none;
}

@media only screen and (max-width : 319px) {    
  .alert {display:inline;}
}

HTML div

<div class="alert">Because you are viewing this page on a decive with a very small screen this page has been set to only show basic content.</div>

Answer 1

您可以使用媒体查询。在顶部添加basic styling。接下来添加一个简单的媒体查询，其中包含所有奇特的颜色。

h1, h2, h3, h4, h5, h6, p {
    color: black;
}
@media screen and (min-width: 300px) {
    h1, h2, h3, h4, h5, h6, p {
        color: red;
    }
}