移动和桌面相同div的不同风格

Question

我的内容正文中有一个<div>部分，里面有一个<table>，如下所示：

<div class="hub_specification">
example html table
</div>

对于桌面视图，我想显示此<div>内容区域宽度为50％，向左浮动。

对于移动视图，我想显示此<div>内容区域宽度为100％，没有任何浮动。

那么装饰hub_specification <div>的CSS代码是什么？

如果两种方式都存在会更好：WordPress 和内联中名为style.css的文件的CSS。

Answer 1

如果我没错，你想要这个吗？ click
的 HTML

<div class="hub_specification">
example html table
</div>

<强> CSS

.hub_specification {
    width:100%;
    background-color:red;
    height:20px;  
}
@media only screen and (max-width:350px) {
    .hub_specification {
    width:50%;
    background-color:oink;
    height:20px;  
}
}

Answer 2

使用CSS media queries

.hub_specification{
    background-color: lightgreen;
}

@media screen and (max-width: 480px) {
    .hub_specification {
        background-color: lightblue;
    }

}

参考：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp