当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Applying different css classes for resolutions

问题描述:

I have a span class user-name inside my UL. I want to either remove or apply different class on different resolution.

<link href="media-queries.css" rel="stylesheet">

<span class="user-name">Shane</span>

When i re-define my class on different resolution, it does not 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;

}

}

It always pick the base defined class.

.user-name {

min-width:10px;

display:inline-block;

margin-right:20px;

color:red;

}

网友答案:

Use media queries in proper manner, make sure this code is at bottom

.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 */
    }  
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: