javascript - 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 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

您可以使用媒体查询。在顶部添加您的基本样式。接下来添加一个简单的媒体查询，其中包含所有您喜欢的颜色。

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