html - 为分辨率应用不同的 css 类

Question

我的 UL 中有一个跨度类 user-name。我想在不同的分辨率下删除或应用不同的类。

<link href="media-queries.css" rel="stylesheet">
<span class="user-name">Shane</span>

当我在不同的分辨率上重新定义我的类时，它不会pickup。

@media only screen and (max-device-width:480px) {
    .user-name {
        min-width:10px;
        display:inline-block;
        margin-right:20px;   
        color:red;
    }   
}
/* default iPad screens */;
@media only screen and (device-width:768px) {
    .user-name {
        min-width:10px;
        display:inline-block;
        margin-right:20px;   
        color:green;
    }        
}

它总是选择基定义的类。

.user-name {
   min-width:10px;
   display:inline-block;
   margin-right:20px;   
   color:red;
}

Answer 1

正确使用媒体查询，确保这段代码在底部

.user-name {
   min-width:10px;
   display:inline-block;
   margin-right:20px;   
   color:red;
}

@media (max-width: 768px){ 
   .user-name {
      color:green;
   }
}

@media (max-width: 480px){ 
   .user-name {   
        color:red; /* use can use different color here */
    }  
}