代码之家 › 专栏 › 技术社区 › Artem

UIkit小屏幕风格

getuikit css html

1

Artem · 技术社区 · 9 年前

当一个块在另一个块下移动时,我如何为小屏幕上的某个元素设置不同的样式?例如:将第一个块设置为红色。

<style type="text/css">
    #block1 {
        background: skyblue;
    }

    #block2 {
        background: yellow;
    }

    /*
    #block1 on small screen {
        background: red;
    }
    */
</style>

<div class="uk-grid">
    <div id="block1" class="uk-width-small-2-3">
         BLOCK 1
    </div>
    <div id="block2" class="uk-width-small-1-3">
         BLOCK 2
    </div>
</div>

jsfiddle

1 回复 | 直到 9 年前

1

2

Asons Oliver Joseph Ash 9 年前

这能帮上忙吗?

Updated fiddle

#block1 {
    background: skyblue;
}

#block2 {
    background: yellow;
}

@media screen and (max-width: 480px) {  
  #block1 {
    background: red;
  }
}