根据CSS中的浏览器大小更改背景颜色

史蒂夫·梅德利

我不知道这段代码出了什么问题。背景颜色完全不变,只是在整个过程中保持白色。

<style type="text/css">
      h1 {
        position: absolute;
        text-align: center;
        width: 100%;
        font-size: 6em;
        font-family: Roboto;
        transition: all 0.5s;
      }

      @media screen and (min-width: 0px) and (max-width: 400px) {
        background-color: red;
      }
      @media screen and (min-width: 401px) and (max-width: 599px) {
        background-color: green;
      }
      @media screen and (min-width: 600px) {
        background-color: blue;
      }
    </style>
吉拉德·阿齐(Gilad Artzi)

尝试:

@media screen and (min-width: 0px) and (max-width: 400px) {
    body { background-color: red; }
}
@media screen and (min-width: 401px) and (max-width: 599px) {
    body { background-color: green; }
}
@media screen and (min-width: 600px) {
    body { background-color: blue; }
}

background-color现在,属性已分配给body

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

基于浏览器对 CSS 属性的支持区分背景颜色

CSS窗口根据浏览器高度调整大小

在移动浏览器中滚动时调整背景大小

当通过浏览器搜索找到时,用于更改元素背景颜色的 CSS 伪类是什么?

在浏览器刷新时更改 JS 中的颜色

导航器在浏览器中更改颜色

Lynx 文本浏览器更改背景颜色以匹配终端模拟器设置

CSS背景颜色过渡在特定浏览器(台式机+移动版)中不起作用

CSS网格在浏览器中显示不同的大小

CSS-在Outlook浏览器中设置图像大小

如何使用JavaScript / jQuery根据浏览器的窗口大小动态设置CSS类中的高度?

我想更改页面背景颜色,但无法在Chrome浏览器中正常运行

如何更改网络浏览器的标签栏背景颜色或图像?

Chrome浏览器上的滚动条会删除CSS背景颜色

CSS:当浏览器窗口大小更改时,如何动态更改伪元素的宽度?

是否可以根据浏览器类型使用不同的CSS背景图像?

CSS-根据背景更改文本颜色

为什么我的div在Wordpress中不能具有全浏览器宽度的背景颜色?

我想在选择也应在野生动物园浏览器中运行的文本时更改文本背景颜色

在浏览器中增加堆栈大小

CSS背景渐变在浏览器中滚动时不覆盖背景

CSS背景和背景图片仅显示在Chrome桌面浏览器中

CSS-调整浏览器窗口大小时固定的边框宽度更改

根据HTML,Javascript或CSS的更改自动重新加载Chrome浏览器

CSS-如何在调整浏览器大小时使用背景图像调整texbox的大小?

如何更改按钮中的背景颜色大小?

Titleblock英雄根据浏览器大小缩放全高

根据浏览器大小重复显示图像

根据浏览器大小添加和添加内容