Question

我的UL内部有一个span class user-name。我希望在不同的分辨率上remove或apply不同的类。

<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 */
    }  
}

为解决方案应用不同的css类

1 个答案: